創建簡單的CSS多級菜單

我想製作一個具有導航功能的網頁，就像這樣：http://www.rex-ny.com/單擊列表項並且其子項目出現並保留。創建簡單的CSS多級菜單

我可以做到懸停，但我不知道如何讓它保持不懸停時。

看來最簡單的事情是最難做的事情。

<ul id="menu"> 
    <li><a href="#">Menu 1</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Menu 2</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
    <li><a href="#">Menu 3</a> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
    </li> 
</ul>

感謝

這裏是一個的jsfiddle http://jsfiddle.net/phzuC/

來源

2013-08-29 user2730793

你能PST你徘徊例子的小提琴，然後我們的人會也許使它可點擊 – Vector

這裏是的jsfiddle http://jsfiddle.net/phzuC/ – user2730793

@ user2730793這是行不通的。只要鬆開鼠標，菜單就會消失。 – ninty9notout

這裏是一個CSS唯一的解決辦法是要求OP，使用tabindex

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/2/

#menu li > ul { 
    display:none; 
} 

#menu li:focus > ul { 
    display:block; 
} 
li { 
    outline: 0; 
}

EDITED

這是您需要的jQuery解決方案。它使子菜單保持打開狀態，實現起來非常簡單。 11行代碼。

DEMO http://jsfiddle.net/kevinPHPkevin/phzuC/5/

$(document).ready(function() { 
    $(".nav-top > li").click(function(e) { 
    if($(this).find('ul').hasClass('expanded')) { 
     $(this).find('ul').removeClass('expanded').hide(); 
    } else { 
    $(this).find('ul').addClass('expanded').show(); 
    } 
    }); 
    $('.nav-top a').click(function(e){ 
    e.preventDefault(); 
    }); 
});

來源

2013-08-29 21:13:22 Vector

這傢伙是個天才！ – 2013-08-29 21:14:15

您應該從「Menu *」按鈕中刪除href屬性。點擊內部鏈接後也會停止工作。 – Itay

這是一個很好的解決方案。一旦第一級鏈接失去焦點，OP將不得不妥協，但重新發表@ TheApptracker的話，這是天才！ – ninty9notout

下面是一個使用或者另一個CSS唯一的解決辦法：如果你想菜單，如果你想在菜單上點擊切換

單選按鈕

複選框當另一個被選中時自動關閉

參考：

Demo

基本行爲的CSS（演示有更多的樣式刪除默認的列表縮進/子彈）：

.sideMenu input[type='radio'], 
.sideMenu input[type='checkbox'] { 
    display: none; 
} 
.sideMenu input[type='radio'] + ul, 
.sideMenu input[type='checkbox'] + ul { 
    position: relative; 
    display: none; 
} 
.sideMenu input[type='radio']:checked + ul, 
.sideMenu input[type='checkbox']:checked + ul { 
    display: block; 
}

HTML（可以任意深）：

<nav class="sideMenu"> 
    <ul> 
     <li> 
      <label for="menu1">Menu 1</label> 
      <input id="menu1" type="checkbox" name="menu1"> 
      <ul> 
       <li><a href="#">Item A</a></li> 
       <li><a href="#">Item B</a></li> 
       <li><a href="#">Item C</a></li> 
      </ul> 
     </li> 
     <!-- repeat --> 
    </ul> 
</nav>

來源

2013-08-29 21:31:07 dc5

創建簡單的CSS多級菜單

回答

相關問題