0

I'm using the Yamm mega menu for Bootstrap 3 and need a multi dropdown to work as a grid.

The first dropdown section is within the first 4 column grid, then the second half of the dropdown should go into the second 4 column grid and lastly the third one goes into the final 4 column grid.

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

Something similar to this http://www.bentleymotors.com/en.html but without all the moving animation. Bare in mind to activate parts of the dropdown, you need to click on the arrows to the right. Something I didn't find obvious at first.

This is what I have so far, I must warn you that it currently isn't within a grid, because when I tried, it just broke the whole dropdown. I'm guessing that I shouldn't do the CSS only version of a multi dropdown and instead use some javascript and somehow separate it into their own divs. Please not that there could also be more than one multi dropwdown within the nav, but they should always be 3 levels deep max.

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/

CheckeredMichael
  • 571
  • 8
  • 30

1 Answers1

1

I have found your question because I was also interested in similar functionality, but such that would be more responsive (for mobile devices to do it on click). Here below is the solution, in case someone else needs it, too:

For Bootstrap 3.1.1 Run it with 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();
    });
});
palamunder
  • 2,555
  • 1
  • 19
  • 20