Bootstrap 3:如何显示侧面导航栏的子菜单,每个菜单的底部?

时间:2013-12-18 07:27:15

标签: html css twitter-bootstrap navigationbar

我正在尝试使用Bootstrap 3创建侧面导航栏。现在子菜单显示在每个菜单的右侧。我想将它显示在父菜单的底部。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">


      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
        </ul>
      </li>


      <li class="divider"></li>
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options2</a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">Second level</a></li>
          <li class="dropdown-submenu">
            <a href="#">More..</a>
            <ul class="dropdown-menu">
                <li><a href="#">3rd level</a></li>
                <li><a href="#">3rd level</a></li>
            </ul>
          </li>
          <li><a href="#">Second level</a></li>
          <li><a href="#">Second level</a></li>
        </ul>
      </li>
    </ul>

以下是Demo.

编辑: 我尝试使用折叠jsfiddle.net/mridulpv/Wrh8x/5来做到这一点。但还是有些问题。我想在开始时隐藏折叠项目,并删除horizo​​ndal line等。

1 个答案:

答案 0 :(得分:3)

您可以通过不从文档流中删除子菜单来实现此效果。这意味着当菜单项悬停时,所有内容都会被推下。这确实导致了第三级的问题,因为当你将鼠标移出第三级时,一切都会崩溃,你会失去焦点,但我不相信这个菜单很难通过点击而不是徘徊来运行。 (只需在点击时添加/删除一个类。请参阅编辑。)

但这就是你想要做的事情:

.dropdown-submenu > .dropdown-menu{
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}

http://jsfiddle.net/HCxB8/4/

当鼠标悬停在菜单上时,你会看到被推下来。这是因为我定位相对而不是绝对。

修改

随着更多的摆弄,我设法点击使用非常小的jquery和更多的CSS:

JS:

$('.dropdown-submenu > a').click(function(){
    $(this).parent().children('.dropdown-menu').toggleClass('shown');
});

CSS:

.dropdown-submenu > .dropdown-menu{
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}

.dropdown-submenu:hover > .dropdown-menu{
    display: none;
}

.shown{
    display: block;
}

.dropdown-submenu:hover > .shown{
    display: block;
}

http://jsfiddle.net/HCxB8/5/