Bootstrap Snippet Mani Multi Responsive dropdown 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 ---------->
<nav class="findNav" role="navigation">
    <button class="findNavToggle">
    toggle
    </button>
    <div class="findNavContainer">
      <ul class="nav-menu menu">
      <li class="findMenuItem findMenuHasDropdown"> 
        <a href="#!" class="menu-link">Root</a>
        <ul class="findNavDropdown menu">
          <li class="findMenuItem"> 
            <a href="#!" class="menu-link">Level 1</a> </li>
            <li class="findMenuItem findMenuHasDropdown staticPosition"> 
                <a href="#!" class="menu-link">Level 1</a>
                <ul class="findNavDropdown menu">
                    <li class="findMenuItem staticPosition">
                        <a href="#!" class="menu-link">AIPMT</a>
                    </li>
                    <li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
                    <li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
                    <li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
                    <li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
                    <li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
                    <li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
                    <li class="findMenuItem"><a href="#!" class="menu-link">Level 2</a></li>
                </ul>
            </li>
            <li class="findMenuItem"> 
                <a href="#!" class="menu-link">Level 1</a> 
            </li>
            <li class="findMenuItem"> 
                <a href="#!" class="menu-link">Level 1</a> 
            </li>
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
.findNavContainer {
    position: fixed;
    top: 60px; 
    left: 0;
    z-index: 9999;
    overflow-y: auto;
    visibility: hidden; 
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); 
    -webkit-overflow-scrolling: touch; 
}
.findNavContainer.is-visible {
    visibility: visible; 
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); 
}
.findIsActive .icon-menu .line-3 {
    -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
    -ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
    transform: translateY(-8px) translateX(0) rotate(-45deg);
}
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
$(function() {
        var html = $('html, body'),
            navContainer = $('.findNavContainer'),
            navToggle = $('.findNavToggle'),
            navDropdownToggle = $('.findMenuHasDropdown');
        // Nav toggle
        navToggle.on('click', function(e) {
            var $this = $(this);
            e.preventDefault();
            $this.toggleClass('findIsActive');
            navContainer.toggleClass('is-visible');
            html.toggleClass('nav-open');
        });
      
        // Nav dropdown toggle
        navDropdownToggle.on('click', function() {
            var $this = $(this);
            $this.toggleClass('findIsActive').children('ul').toggleClass('is-visible');
        });
      
        // Prevent click events from firing on children of navDropdownToggle
        navDropdownToggle.on('click', '*', function(e) {
            e.stopPropagation();
        });
    });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Mani Multi Responsive dropdown"
Bootstrap 3.3.0 Snippet by mani88100ni

Related: See More

Questions / Comments:

"Mani Multi Responsive dropdown" Bootstrap 3.3.0 Snippet by mani88100ni

Related: See More

Questions / Comments:

"Mani Multi Responsive dropdown"
Bootstrap 3.3.0 Snippet by mani88100ni