twitter-bootstrap - Bootstrap 的菜单设计问题

标签 twitter-bootstrap twitter-bootstrap-3

我正在使用 Bootstrap 3.2.0。设计非常好，但现在我面临创建如下菜单的问题:

enter image description here

为了设计菜单，我在plunker写了代码这是我的示例代码:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="row">
                <ul class="topmenu">
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                    <li class="topmenuItem"><a>HOME</a></li>
                </ul>
                <ul class="submenu">
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                    <li class="submenuItem">
                        <ul class="submenuItemGroup">
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                            <li class="submenuItemGroupItem"><a>SUBMENU</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

我无法管理图像菜单正上方的菜单。我该如何设计呢？谢谢。

最佳答案

JSFIDDLE : 这是代码。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 <div class="container-fluid">
  <ul class="nav navbar-nav navbar-left">
    <li><a href="#">Link</a></li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home1 <b class="caret"></b></a>
      <ul class="dropdown-menu">

        <li class="dropdown-submenu">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2</a>
          <ul class="dropdown-menu">
            <li><a  href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>

            <li>
              <li class="dropdown-submenu">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2</a>
                <ul class="dropdown-menu">
                  <li><a  href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Separated link</a></li>
                </ul>
              </li>  

            </li>
          </ul>
        </li>

        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home2 <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home3 <b class="caret"></b></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link...</a></li>
      </ul>
    </li>

  </ul>
</div>
</nav>

如果你想在你的菜单中有多个级别，这个代码是必要的，否则不要添加下面的代码。

<style>

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

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

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #fff;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

</style>

该菜单的另一种方式

<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid" >
<div class = "row" style = "background-color:orange">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class = "row" style = "background-color:green">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class = "row" style = "background-color:green">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>


</div>
</nav>

关于twitter-bootstrap - Bootstrap 的菜单设计问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25636506/

上一篇：plone - 如何获取有关 ZODB 冲突错误的指标？

下一篇：observable - Rxjs - 只有第一个观察者可以看到来自 observable.share() 的数据

相关文章：

jquery - 导航栏词缀对导航栏没有影响

css - Drupal 7 Bootstrap .active css 无法覆盖？

twitter-bootstrap - 如何设计一排图片？

angularjs - 在流体 Bootstrap 布局中隐藏列

html - Bootstrap 4 动画导航栏不显示

javascript - 如何继续页面上的特定元素

javascript - 获取数据属性的值并将其显示在 Bootstrap 的模式中

javascript - 存储 Bootstrap 数据 - 模态、徽章和警报

twitter-bootstrap - 在 Bootstrap 选项卡更改上暂停视频

javascript - 延迟加载在 Bootstrap 轮播中不起作用

©2024 IT工具网  联系我们