Question

我正在使用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>

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

Answer 1

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>

Bootstrap的菜单设计问题

1 个答案: