純HTML和CSS可切換下拉菜單

所以我發現這兩個提示頁面的原理解釋：使用：懸停使下拉顯示和複選框切換打開或關閉純HTML和CSS可切換下拉菜單

我知道它的工作，但我有問題，當我來CSS樣式。設置：懸停狀態非常簡單。不那麼簡單的是，從切換到父級CSS選擇器的位置開始切換下拉菜單。我真的不想使用JavaScript。

所以我粘貼我得到的工作JSFiddle類的代碼。複選框的位置現在不重要。 My code

這部分（在CSS的底部）是問題。

nav ul li #chktut:checked:parent { 
     background: #4b545f; 
     background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
     background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
     background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
    }

來源

2014-04-28 Samuel Charpentier

如果不修改父元素的類名稱，則無法保持狀態。爲此，您需要使用JavaScript。 –

這裏是兩個網站：http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu http://leslievarghese.com/click-events-using-pure-css/ –

如果我把輸入放在li外面，然後我可以選擇li和li子ul ?,它實際上並不需要在裏面... –

所以我一直在做JS fiddle似乎工作。我做了造型和機制。希望它可以幫助某人。這是一個爲移動非常有用（這樣他們就可以快速地瀏覽的所有頁面，而無需加載JavaScript或去在頁面上直接離開它的子頁面，在這裏他們真的想去。）

my code is entirely on JS Fiddle, no rights or anything is required to use, it's free, take it.

來源

2014-04-30 05:22:32

要連接到chktut的「教程」點擊，使用標籤：

<li><input type="checkbox" id="chktut" /><label for="chktut">Tutorials</label>

要隱藏的複選框，設置它的顯示器無法比擬的：

#chktut{ 
    display: none; 
}

來源

2014-04-28 20:51:04 diynevala

菜單的一部分需要是切換按鈕另一部分需要鏈接到另一個頁面，但我現在用我的js小提琴把它釘在了它上面 –

我有做了這個。這很容易的風格和不使用的JavaScript，這也是響應：d

<!doctype html> 
<html> 
    <head> 
     <title>teste</title> 
     <style> 
      .dropdown_link { 
       background-color: #000; 
       color: #eee; 
       display: block; 
       padding: 5px; 
      } 

      .fullWidth { 
       width: 100%; 
      } 

      .hover:hover { 
       background-color: #408FFF; 
      } 

      .menu_container { 
       border: 0; 
       margin: 0 0 10px 0; 
       padding: 0; 
      } 

      .menu_dropdown_container:hover ul { 
       display: table; 
      } 

      .menu_dropdown_list { 
       display: none; 
       padding: 0; 
       position: absolute; 
      } 

      .menu_item { 
       display: table-cell; 
       background-color: #eee; 
       text-align: center; 
      } 

      .menu_link { 
       background-color: #6FA8F7; 
       color: #eee; 
       display: block; 
       padding: 10px 0; 
       width: 100%; 
      } 

      .menu_list { 
       display: table; 
       margin: 0; 
       padding: 0; 
      } 

      .no_decoration { 
       text-decoration: none; 
      } 

      .no_bullets { 
       list-style: none; 
      } 

      @Media screen and (max-width:480px) { 
       .menu_item, .dropdown_item, .menu_dropdown_list { 
        display: block; 
        width: 100%; 
       } 

       .menu_dropdown_list { 
        position: static; 
       } 
      } 
     </style> 
    </head> 
    <body> 
     <div class="menuContainer fullWidth"> 
      <ul class="fullWidth menu_list no_bullets"> 
       <li class="menu_item">Your logo here</li> 
       <li class="menu_item"><a class="menu_link hover no_decoration" href="#">Home</a></li> 
       <li class="menu_item menu_dropdown_container"> 
        <a href="#" class="menu_link hover no_decoration">Products</a> 
        <ul class="menu_dropdown_list no_bullets"> 
         <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your home</a></li> 
         <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your enterprise</a></li> 
         <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For babies</a></li> 
         <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For Flying cats trying to conquer the world</a></li> 
        </ul> 
       </li> 
       <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Company</a></li> 
       <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Blog</a></li> 
      </ul> 
     </div> 
    </body> 
</html>

來源

2014-04-28 21:41:14

純HTML和CSS可切換下拉菜單

回答

相關問題