创建简单的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多级菜单

回答

相关问题