Bootstrap的菜单设计问题

我正在使用Bootstrap 3.2.0。这是很好的设计，但现在我面临的一个问题，像下面的代码创建菜单：在plunker Bootstrap的菜单设计问题

enter image description here

要设计的菜单，我已经写代码，这里是我的示例代码：

<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>

我无法管理菜单上面的图像菜单。我怎么设计这个？谢谢。

来源

2014-09-03 Shohel

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>

来源

2014-09-07 01:23:58 kelgwiin

@kelgwiin喜的另一种方式，感谢您的回答，你有没有看到我的plunker。有两个步骤菜单，无论是顶部还是底部。下拉菜单可以从我提到我的蹲跳者的任何部分挂起。 – Shohel 2014-09-07 16:13:48

Hellow @Shoel，我看到你的笨蛋，你使用的语法不对。你必须使用每个标签的corrent类，否则它不能正确工作。如果你想要一个子菜单必须写在类dropdown-submenu中，标签'li'应该有''dropdown'类，而内部列表'ul'应该有''dropdown-menu'类。您必须严格遵循语法才能正常工作。请参阅bootstrap的官方手册[Bootstrap - Navbar]（http://getbootstrap.com/components/#navbar） – kelgwiin 2014-09-07 18:48:57

Hi @kelgwiin，您是对的。但我不得不让类topmenu，topmenuItem等，因为bootstrap不支持我的菜单结构。你想让我的确切菜单？谢谢 – Shohel 2014-09-08 02:44:22

Bootstrap的菜单设计问题

回答

相关问题