jQueryのスライドメニューはメインメニューの下に表示されます

Question

以下のコードでは<header>を<image>と<navigation>で構成しました。ここで<button>と<SlideItem>の部分にあるように、<navigation>にサブメニューを追加したいと思います。

これまでスライド機能は完全に機能しています。ただし、メインメニューのすぐ隣には表示されず、メインメニューのすぐ下には表示されません。それはボタンの<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; ... }を使用すると、すべてのul要素にCSSが適用されます。より良い方法は、クラスまたは継承を使用することです。親にposition:relativeが親に対して配置サブメニューを維持すると、サブメニュー上の絶対位置を使用

$(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; 
} 

あなたは、マウスがその上をホバリング時にsubが上にスライドさせると、メインメニューにフォーカスを失うことになるとして、あなたのコードで遊んでする必要があります。

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

。

そこからちょっと余計なことがあります。ここでは、サブメニューのフレックス方向を垂直に反転させ、特定の高さを与えました。 （これらのメニューの実際の内容に応じて、これは必要な場合としない場合があります）サブメニューは、liアイテムにグローバルに適用されたjustify-contentなどのために親メニュー項目の中央に配置されます。親メニューと子メニューのスタイルを変えたい場合は、それらのルールをクラス名に基づいて作成することができます。

$(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>