Bootstrap Snippet Bootstrap Mega menu using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="mega-nav">
<!-- 1 -->
<div class="mega-nav-item dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Clothing <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li>
            <a href="">All clothing</a>         
        </li>
        <li>
        <a class="trigger right-caret">Careerwear</a>
           <ul class="dropdown-menu sub-menu">
                <li>
                    <a class="trigger right-caret">Men's careerwear</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Shirts</a></li>
                        <li><a href="#">Ties</a></li>                       
                    </ul>
                </li>
                <li>
                    <a class="trigger right-caret">Women's careerwear</a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Skirts</a></li>
                        <li><a href="#">Blouses</a></li>                        
                    </ul>
                </li>
            </ul> 
        </li>
        <li><a href="#">Workwear</a></li>
    </ul>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.mega-nav {
    background: #ccc;
    width: 100%;
    font-size: 14px;
    color: black;
    padding: 15px 0;  
}
.mega-nav-item {
    display: inline-block;
    position: relative;
}
@media (min-width: 992px) {
    .dropdown-menu {
        width: 100%;
    }
}
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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();
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap Mega menu"
Bootstrap 3.3.0 Snippet by katebrook-hart

Related: See More

Questions / Comments:

"Bootstrap Mega menu" Bootstrap 3.3.0 Snippet by katebrook-hart

Related: See More

Questions / Comments:

"Bootstrap Mega menu"
Bootstrap 3.3.0 Snippet by katebrook-hart