出現在主菜單下的jQuery幻燈片菜單

Question

通過下面的代碼，我創建了一個固定的<header>，它由<image>和<navigation>組成。現在我想添加子菜單<navigation>，您可以在<button>和<SlideItem>部分看到。

幻燈片功能迄今爲止完美。但是，它確實出現在主菜單的旁邊，而不是在其下面。它似乎卡在按鈕的<li>內。

我需要在我的代碼中更改什麼，所以sub-menus出現在主菜單下方？

$(document).ready(function() { 
 
    $(".button").mouseenter(function() { 
 
    $(this).children(".SlideItem").slideDown(500); 
 
    }); 
 
    $(".button").mouseleave(function() { 
 
    $(this).children(".SlideItem").slideUp(500); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    width: 80%; 
 
    height: 10%; 
 
    margin-left: 10%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: yellow; 
 
} 
 

 
.image { 
 
    width: 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align:center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: green; 
 
} 
 

 
.navigation { 
 
    width: 70%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
ul { 
 
    height: 100%; 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: blue; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align:center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.content{ 
 
    width: 80%; 
 
    margin-top: 10%; 
 
    margin-left: 10%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: red; 
 
} 
 

 
.SlideItem { 
 
    display: none; 
 
} 
 

 
.SlideItem { 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: lime; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="header"> \t 
 
    <div class="image"> 
 
    Image 
 
    </div> 
 
    <nav class="navigation"> 
 
    <ul> 
 
     <li class="button"> 1.0 Main Menu 
 
     <ul class="SlideItem"> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.2 Sub Menu </li> 
 
      <li> 1.3 Sub Menu </li>  
 
     </ul> 
 
     </li> 
 
     <li> 2.0 Main Menu </li> 
 
     <li> 3.0 Main Menu </li> 
 
    </ul> 
 
    </nav> 
 
</div>

您也可以找到我的代碼here。

Answer 1

上SlideItem相對於直接父使用position:absolute，並避免對元件使用CSS例如直接你已經使用了ul { height: 100%;display:flex; ... }它將應用css到所有的ul元素，更好的方法是使用類或繼承。

$(document).ready(function() { 
 
    $(".button").mouseenter(function() { 
 
    $(this).children(".SlideItem").slideDown(500); 
 
    }); 
 
    $(".button").mouseleave(function() { 
 
    $(this).children(".SlideItem").slideUp(500); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    width: 80%; 
 
    height: 10%; 
 
    margin-left: 10%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: yellow; 
 
} 
 

 
.image { 
 
    width: 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: green; 
 
} 
 

 
.navigation { 
 
    width: 70%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.navigation > ul { 
 
    height: 100%; 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: blue; 
 
} 
 

 
.navigation > ul > li { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.content { 
 
    width: 80%; 
 
    margin-top: 10%; 
 
    margin-left: 10%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: red; 
 
} 
 
.button{ 
 
    position:relative; 
 
} 
 
.SlideItem { 
 
    display: none; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: lime; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    padding:0; 
 
    margin:0; 
 
} 
 
.SlideItem li{ 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="header"> 
 

 
    <div class="image"> 
 
    Image 
 
    </div> 
 

 
    <nav class="navigation"> 
 
    <ul> 
 
     <li class="button"> 1.0 Main Menu 
 
     <ul class="SlideItem"> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.1 Sub Menu </li> 
 
     </ul> 
 
     </li> 
 
     <li> 2.0 Main Menu </li> 
 
     <li> 3.0 Main Menu </li> 
 
    </ul> 
 
    </nav> 
 

 
</div>

Answer 2

使用position: absolute

.SlideItem { 
    display: none; 
    position: absolute; 
    top: 20px; 
} 

你需要玩你的代碼作爲鼠標將失去主菜單上的焦點，引起子向上滑動盤旋在它時。

Answer 3

首先，您需要將下拉元素的顯示設置爲block。這樣塊會垂直放在父菜單項下面（而不是在它旁邊）。然後刪除height: 100%它會導致您的下拉元素出現問題。此外，請將位置設置爲absolute，以便您決定是垂直還是水平位置：此處我們將其設置爲41px。

最後，我添加了一行JS以確保菜單在頁面加載時隱藏。

$(document).ready(function() { 
 
    $(".button").mouseenter(function() { 
 
    $(this).children(".SlideItem").slideDown(500); 
 
    }); 
 
    $(".button").mouseleave(function() { 
 
    $(this).children(".SlideItem").slideUp(500); 
 
    }); 
 
}); 
 

 
$(".button").children(".SlideItem").slideUp(0);

body { 
 
    margin: 0; 
 
} 
 

 
.header { 
 
    width: 80%; 
 
    height: 43px; 
 
    margin-left: 10%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: yellow; 
 
} 
 

 
.image { 
 
    width: 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: green; 
 
} 
 

 
.navigation { 
 
    width: 70%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
ul { 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: blue; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.content { 
 
    width: 80%; 
 
    margin-top: 10%; 
 
    margin-left: 10%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: red; 
 
} 
 

 
.SlideItem { 
 
    display: block; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: lime; 
 
    position: absolute; 
 
    top: 41px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<div class="header"> 
 

 
    <div class="image"> 
 
    Image 
 
    </div> 
 

 
    <nav class="navigation"> 
 
    <ul> 
 
     <li class="button"> 1.0 Main Menu 
 
     <ul class="SlideItem"> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.1 Sub Menu </li> 
 
     </ul> 
 
     </li> 
 
     <li> 2.0 Main Menu </li> 
 
     <li> 3.0 Main Menu </li> 
 
    </ul> 
 
    </nav>

Answer 4

使用在子菜單絕對定位，與position:relative父將保持相對於父子菜單的位置。

從那裏只是有點額外twiddling;在這裏，我將子菜單的彈性方向翻轉到垂直，並給它一個特定的高度。 （取決於這些菜單的實際內容，這可能需要也可能不需要。）由於justify-content等已被全局應用於li項目，子菜單位於父菜單項的中心;如果您想爲父級和子級菜單使用不同的樣式，您可能希望將這些規則基於類名稱。

$(document).ready(function() { 
 
    $(".button").mouseenter(function() { 
 
    $(this).children(".SlideItem").slideDown(500); 
 
    }); 
 
    $(".button").mouseleave(function() { 
 
    $(this).children(".SlideItem").slideUp(500); 
 
    }); 
 
});

.button { 
 
    position: relative; 
 
} 
 

 
.SlideItem { 
 
    position: absolute; 
 
    flex-direction: column; /* we already have display:flex below */ 
 
    height: 150px; /* height of full submenu */ 
 
} 
 

 
.SlideItem li { 
 
    flex-grow: 1 /* make all elements the same height */ 
 
} 
 

 
/* Below is as in original code */ 
 
.header { 
 
    width: 80%; 
 
    height: 10%; 
 
    margin-left: 10%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    position: fixed; 
 
    top: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: yellow; 
 
} 
 

 
.image { 
 
    width: 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: green; 
 
} 
 

 
.navigation { 
 
    width: 70%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
ul { 
 
    height: 100%; 
 
    display: flex; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: blue; 
 
} 
 

 
li { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    align-items: center; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
} 
 

 
.content { 
 
    width: 80%; 
 
    margin-top: 10%; 
 
    margin-left: 10%; 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: red; 
 
} 
 

 
.SlideItem { 
 
    display: none; 
 
} 
 

 
.SlideItem { 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    background-color: lime; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="header"> 
 
    <div class="image"> 
 
    Image 
 
    </div> 
 
    <nav class="navigation"> 
 
    <ul> 
 
     <li class="button"> 1.0 Main Menu 
 
     <ul class="SlideItem"> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.1 Sub Menu </li> 
 
      <li> 1.1 Sub Menu </li> 
 
     </ul> 
 
     </li> 
 
     <li> 2.0 Main Menu </li> 
 
     <li> 3.0 Main Menu </li> 
 
    </ul> 
 
    </nav> 
 

 
</div>