Bootstrap - Yamm Mega Menu - Multi dropdown

Question

Я использую мега-меню Yamm для Bootstrap 3 и нуждаюсь в выпадающем меню для работы в качестве сетки.

Первый выпадающий раздел находится в пределах первой 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; 
} 

EDIT: 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(); 
    }); 
});