帶有下拉菜單的側面菜單

Question

我正在嘗試創建如下圖所示的側面菜單。

我希望菜單出現，並且活動的鏈接具有不同的顏色。 當用戶單擊商店鏈接時，我希望向他們顯示一個下拉菜單。

的HTML：

<div id="mainSidebar">
 <div id="menu">
  <nav>
     <ul>

      <li><a href="#">SHOP</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
      <li><a href="#">LEGAL</a></li>
     </ul>
   </nav> 
  </div>    
 </div>

CSS：

#menu nav ul li  {
font-size: 11px;
top:106px;
list-style-type: none;
text-decoration: none;
color:#ffffff;
line-height: 19px;
}
nav a {
color:rgb(153, 153, 153);
text-decoration: none;
}
#mainSidebar {
display: block;
font-family:arial;
font-size: 11px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 450px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 750px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: fixed;
text-transform: uppercase;
vertical-align: baseline;   
}
#menu nav ul {
padding: 0px;
line-height: 11.5px;
margin-top: 0px;    
padding-bottom: 5px;
width: 143px;
padding-top: 5px;   
}
#menu nav ul li a:hover{
color: #ffffff;
text-decoration: underline;
}

Answer 1

這似乎是您要尋找的。 我只在CSS中添加了前幾行。

如果您希望僅在單擊而不是懸停時打開它，則需要使用JavaScript編碼。

 body { background: black; color: white; } #menu nav > ul > li > ul { display: none; text-align: right; } #menu nav a { display: block; } #menu nav > ul > li > a { display: block; border-bottom: 3px solid transparent; } #menu nav > ul > li:hover > a { border-bottom: 3px solid white; } #menu nav > ul > li:hover > ul { display: block; } #menu nav ul li { font-size: 11px; top:106px; list-style-type: none; text-decoration: none; color:#ffffff; line-height: 19px; } nav a { color:rgb(153, 153, 153); text-decoration: none; } #mainSidebar { display: block; font-family:arial; font-size: 11px; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; height: 450px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 750px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; position: fixed; text-transform: uppercase; vertical-align: baseline; } #menu nav ul { padding: 0px; line-height: 11.5px; margin-top: 0px; padding-bottom: 5px; width: 143px; padding-top: 5px; } #menu nav ul li a:hover{ color: #ffffff; /* text-decoration: underline; */ } 

 <div id="mainSidebar"> <div id="menu"> <nav> <ul> <li> <a href="#">SHOP</a> <ul> <li><a href="#">T-SHIRT</a></li> <li><a href="#">KNIT</a></li> <li><a href="#">SHIRT</a></li> <li><a href="#">PANTS</a></li> <li><a href="#">ACCESSORY</a></li> </ul> </li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">LEGAL</a></li> </ul> </nav> </div> </div> 

如果您只想單擊解決方案，請從CSS中刪除它：

#menu nav > ul > li:hover > ul {
    display: block;  
}

並添加javascript代碼（需要jQuery）：

$('#menu nav > ul > li > a').on('click', function() {
    $(this).siblings('ul').toggle();
});

Answer 2

我決定從頭開始，也許會給您一個不同的觀點（因為為什么不這樣）：

• 使用簡單的HTML結構
• 使用過渡進行更平滑的懸停事件（您可以很容易地擴展它，想象力主要是您的極限）。
• 保持字體完整性。
• 如圖所示，將菜單置於屏幕中央。 您可以隨時輕松更改此設置。
• 利用創作自由來輕松改善外觀。

編輯將動畫添加到在列表標題下運行的下划線。

 html, body { background-color: black; } .navigation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; margin: 0 auto; } .mainmenu, .submenu { list-style: none; padding: 0; margin: 0; } .mainmenu a { display: block; text-decoration: none; padding: 10px; color: lightgray; font-family:arial; font-size: 11px; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; } .mainmenu > li { position: relative; } .mainmenu > li > .underline { position: absolute; top: 30px; left: 0; width: 0%; height: 3px; background: white; transition: all 0.7s; } .mainmenu > li:hover > .underline { width: 100%; } .mainmenu li:hover .submenu { display: block; max-height: 200px; } .submenu a { text-align: right; } .submenu a:hover { color: white; } .submenu { overflow: hidden; max-height: 0; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } 

 <nav class="navigation"> <ul class="mainmenu"> <li> <a href="#">Shop</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">T&#8211;SHIRT</a></li> <li><a href="">KNIT</a></li> <li><a href="">SHIRT</a></li> <li><a href="">CUT&amp;SEW</a></li> <li><a href="">PANTS</a></li> <li><a href="">ACCESSORY</a></li> </ul> </li> <li> <a href="#">About</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">YOURSELF</a></li> <li><a href="">MYSELF</a></li> <li><a href="">JUAN</a></li> </ul> </li> <li> <a href="#">Contact</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">US</a></li> <li><a href="">MARS</a></li> <li><a href="">EVERYONE</a></li> <li><a href="">DOG</a></li> </ul> </li> <li> <a href="#">Legal</a> <span class="underline"></span> <ul class="submenu"> <li><a href="">OUR PROMISE</a></li> <li><a href="">YOUR PROMISE</a></li> </ul> </li> </ul> </nav> 

有問題嗎？ 把它們寫在評論部分:)