Bootstrap Snippet Responsive Multi Html Menu using HTML CSS Javascript

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="container">
    <div class="row">
        <div class="rmm style">
            <ul>
                <li>
                    <a href="#">Books</a>
                    <ul>
                        <li>
                            <a href="#">Audiobooks</a>
                        </li>
                        <li>
                            <a href="#">Cookbooks</a>
                        </li>
                        <li>
                            <a href="#">Catalogs</a>
                        </li>
                        <li>
                            <a href="#">Other</a>
                            <ul>
                                <li><a href="#">Other 1</a></li>
                                <li><a href="#">Other 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Dvds</a>
                </li>
                <li>
                    <a href="#">Music</a>
                    <ul>
                        <li><a href="#">Cassettes</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
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
 
 @font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot');
    src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.woff') format('woff'),
        url('../fonts/icomoon.ttf') format('truetype'),
        url('../fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* minimal styles for that navi */
.rmm {margin: 0 auto;}
.rmm ul {margin: 0; padding:0; list-style: none; position: relative; background: #000;}
.rmm ul:after {content: ""; clear: both; display: block;}
.rmm ul li {float: left;}
.rmm ul li:hover {background: #202020;}
.rmm ul li:hover > ul {display: block;}
.rmm ul li:hover a{color: #fff;}
.rmm ul li a {color: #fff; display: block; text-decoration: none;}
.rmm ul ul {display: none; margin:0; padding: 0; position: absolute; top: 100%;}
.rmm ul ul li {float: none; position: relative;}
.rmm ul ul li a{color: #fff;}
.rmm ul ul li a:hover {background: #202020;}
.rmm ul ul ul {position: absolute; left: 100%; top:0; width: 100%;}
/* mobile menu header button */
.rmm-toggled {width: 100%; background-color: #555555; min-height: 50px; margin: 0 auto; display: none;}
.rmm-closed ~ .rmm-mobile {display: none!important;}
.rmm-toggled-controls{width: 100%;}
.rmm-toggled-title{width: 60%; float: left; font-size: 27px; color: #fff; font-weight:600; display: block; padding: 8px 0; text-decoration: none; text-transform: uppercase; text-align: left; padding-left: 35px;}
.rmm-toggled-button{width: 20%; float: left; margin-top: 3px;
    display:block;
    width: 32px;
    padding:0 !important;
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
/*
Responsive Mobile Menu v1.1
Plugin URI: responsivemultimenu.com
Author: Adam Wysocki
Author URI: http://oncebuilder.com
License: http://opensource.org/licenses/MIT
*/
function adaptMenu() {
    /*  toggle menu on resize */
    $('.rmm').each(function() {
        // initialize vars
        var maxWidth = 0;
        var width = 0;
        // width of menu list (non-toggled)
        $('.rmm-menu').children("li").each(function() {
            if($(this).parent().hasClass('rmm-menu')){
                width = $(this).outerWidth();//outerWidth();
                if(width>0){
                    maxWidth += width;
                }
            }
        });
        // compare width
        var width = $('.rmm').css('max-width');
        width = width.replace('px', ''); 
        
        if ( $(this).parent().width() > width ) {
            $('.rmm-menu').removeClass("rmm-mobile");
            
            //remove all classes from mobile verion
            $(".rmm-menu ul").removeClass("rmm-subview");
            $(".rmm-menu li").removeClass("rmm-subover-hidden");
            $(".rmm-menu li").removeClass("rmm-subover-visible");
            $(".rmm-menu a").removeClass("rmm-subover-header");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Responsive Multi Html Menu"
Bootstrap 3.3.0 Snippet by goldpaid777

Related: See More

Questions / Comments:

"Responsive Multi Html Menu" Bootstrap 3.3.0 Snippet by goldpaid777

Related: See More

Questions / Comments:

"Responsive Multi Html Menu"
Bootstrap 3.3.0 Snippet by goldpaid777