javascript - Bootstrap - Yamm Mega 菜单 - 多下拉菜单

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/

Answer 1

我发现了您的问题，因为我也对类似的功能感兴趣，但这样会更灵敏(对于移动设备来说，点击即可)。以下是解决方案，以防其他人也需要它:

对于 Bootstrap 3.1.1使用 JSfiddle 运行它:http://jsfiddle.net/chirayu45/Khh4C/1/

Look for this similar question, too.

HTML:

<div class="dropdown" style="position:relative">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Click Here <span class="caret"></span></a>
<ul class="dropdown-menu">
    <li>
        <a class="trigger right-caret">Level 1</a>
        <ul class="dropdown-menu sub-menu">
            <li><a href="#">Level 2</a></li>
            <li>
                <a class="trigger right-caret">Level 2</a>
                <ul class="dropdown-menu sub-menu">
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li>
                        <a class="trigger right-caret">Level 3</a>
                        <ul class="dropdown-menu sub-menu">
                            <li><a href="#">Level 4</a></li>
                            <li><a href="#">Level 4</a></li>
                            <li><a href="#">Level 4</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Level 2</a></li>
        </ul>
    </li>
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 1</a></li>
</ul>

CSS:

.dropdown-menu>li
{   position:relative;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:pointer;
}
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    display:none;
    margin-top: -1px;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left-color:#fff;
    box-shadow:none;
}
.right-caret:after
 {  content:"";
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-left: 4px solid orange;
    display: inline-block;
    height: 0;
    opacity: 0.8;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}
.left-caret:after
{   content:"";
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
    border-right: 4px solid orange;
    display: inline-block;
    height: 0;
    opacity: 0.8;
    vertical-align: middle;
    width: 0;
    margin-left:5px;
}

JS:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        var grandparent=$(this).parent().parent();
        if($(this).hasClass('left-caret')||$(this).hasClass('right-caret'))
            $(this).toggleClass('right-caret left-caret');
        grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
        grandparent.find(".sub-menu:visible").not(current).hide();
        current.toggle();
        e.stopPropagation();
    });
    $(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
        var root=$(this).closest('.dropdown');
        root.find('.left-caret').toggleClass('right-caret left-caret');
        root.find('.sub-menu:visible').hide();
    });
});