サイドナビゲーションバーのドロップダウン

Question

ナビゲーションバーにドロップダウンセクションを作成することができたかどうかは、たとえば「製品」などのオプションの1つをクリックしてリストをドロップダウンするもう一度クリックするとリストが消えます。これはHTML/CSS/JSを使用して可能ですか？

現在のところ、ulタグとliタグを使用して、自分のウェブサイトにナビゲーションバーを作成していますが、それ以外の方法があるかどうかはわかりません。

助けがあれば助かります。

Answer 1

ドロップダウンメニューを作成する方法はたくさんあります。 あなたのチャレンジには、ほぼ純粋なCSS/HTMLメソッドを使用したいと思います。

はこのような何かしようとして考えてみましょう：

/* CSS */ 
 
ul.navigation > li{ 
 
    display:inline-block; 
 
    position:relative; 
 
    list-style:none; 
 
    margin:0px; 
 
} 
 

 
ul.navigation > li > ul{ 
 
    position:absolute; 
 
    background:lightgray; 
 
    display:none; 
 
    left:0px; 
 
    top:20px; 
 
} 
 

 
ul.navigation > li > a:focus + ul{ 
 
    display:block; 
 
}

<!-- HTML --> 
 
<ul class="navigation"> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Services</a></li> 
 
    <li> 
 
    <a href="javascript:void(0)">Products</a> 
 
    <ul> 
 
     <li>Bottles</li> 
 
     <li>Cans</li> 
 
     <li>Cups</li> 
 
    </ul> 
 
    </li> 
 
</ul>

まず我々はトグルとして使用したいのナビゲーションリンクではなく、リンクがhref="javascript:void(0)"を持っていることを確認してください。これにより、a要素のデフォルトの動作がページから移動しないようになります。

次に、ネストされたulにdisplay:noneを追加して、サブメニューを非表示にする必要があります。

サブメニューを表示するには、サブメニューの表示プロパティをブロックに設定する特定のナビゲーションのアンカータグにフォーカスする必要があります。

例： http://codepen.io/eoghanTadhg/pen/ZWxXEb