Question

我正在使用Bootstrap 3的Yamm mega菜单，需要一个多下拉菜单作为网格。

第一个下拉部分位于前4列网格中，然后下拉列表的后半部分应进入第二个4列网格，最后第三个进入最后的4列网格。

http://geedmo.github.io/yamm3/#navbar-collapse-grid

与此http://www.bentleymotors.com/en.html类似但没有所有移动动画的东西。为了激活下拉列表的某些部分，您需要单击右侧的箭头。我起初并没有发现明显的东西。

这是我到目前为止所做的，我必须警告你，它目前不在网格中，因为当我尝试时，它只是打破了整个下拉列表。我猜测我不应该只使用多个下拉列表的CSS版本，而是使用一些javascript并以某种方式将它分成他们自己的div。请注意，导航中也可能存在多个多次下降，但它们应始终最多为3级。

HTML

<nav class="navbar yamm navbar-default">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="grid">
          <div class="row">
              <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown yamm-fw">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
          <li><a href="#">Some action</a></li>
          <li><a href="#">Some other action</a></li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even 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>
        </li>
          </div>
        </li>
      </ul>
    </div><!--/.nav-collapse -->
</nav>

CSS

img { width: 100%; }
.carousel {
    height: 700px;
    overflow: hidden;
}
.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover {
    color: #fff;
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    margin-top: -100px;
}
h2, h2 a, h2 a:hover {
    color: #0a7a3f;
    margin-top: 20%;
}
h2 a:hover {
    text-decoration: none;
}
.navbar{
    margin-bottom: 0;
}
.navbar-nav {
    margin: 0 auto;
    display: table;
    table-layout: fixed;
    float:none;
}
.navbar-default {
    background: #0a7a3f;
    border: none;
}
.grid { padding: 10px; }
@media (min-width: 768px) {
.navbar {
    border-radius: 0;
}
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
    background-color: #fff;
    color: #000;
}
.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;
}

编辑：JSFiddle - http://jsfiddle.net/kr1j2gbu/

Bootstrap - Yamm Mega菜单 - 多下拉列表

0 个答案: