Bootstrap Snippet Minimal Menu using HTML CSS Bootstrap 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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="navbar navbar-fixed-left navbar-minimal animate" role="navigation">
        <div class="navbar-toggler animate">
            <span class="menu-icon"></span>
        </div>
        <ul class="navbar-menu animate">
            <li>
                <a href="#about-us" class="animate">
                    <span class="desc animate"> Who We Are </span>
                    <span class="glyphicon glyphicon-user"></span>
                </a>
            </li>
            <li>
                <a href="#blog" class="animate">
                    <span class="desc animate"> What We Say </span>
                    <span class="glyphicon glyphicon-info-sign"></span>
                </a>
            </li>
            <li>
                <a href="#contact-us" class="animate">
                    <span class="desc animate"> How To Reach Us </span>
                    <span class="glyphicon glyphicon-comment"></span>
                </a>
            </li>
        </ul>
    </nav>
<!-- START OF HTML FOR DEMO - NOT NEEDED -->
<div class="container">
    <div class="row">
        <div class="col-sm-offset-3 col-sm-6 col-md-offset-4 col-md-4">
            <h1 class="title">Minimal Menu</h1>
        </div>
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
/* START OF DEMO CSS - NOT NEEDED */
html, body { height: 100% } /* BODY BACKGROUND IMAGE DOESNT ALWAYS REACH THE BOTTOM OF THE BROWSER*/
body {
    background-color: rgb(100, 100, 100);
    background-image: url(http://s3.amazonaws.com/sitebuilderreport-assets/media/files/000/000/440/original/Old.jpg?1387493955);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: rgb(255, 255, 255);
}
.white-background {
    background-color: rgb(255, 255, 255);
    color: rgb(51, 51, 51);
    padding-top: 10px;
    border-radius: 4px;
}
.title {
    font-size: 3em;
    font-weight: 700;
    text-shadow: 0px 0px 5px rgb(51, 51, 51);
    text-shadow: 0px 0px 5px rgba(51, 51, 51, 0.8);
    text-align: center;
}
#fullscreen {
    position: fixed;
    top: 10px;
    right: 10px;
}
/* END OF DEMO CSS */
    .animate {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function () {
    /* START OF DEMO JS - NOT NEEDED */
    if (window.location == window.parent.location) {
        $('#fullscreen').html('<span class="glyphicon glyphicon-resize-small"></span>');
        $('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/PbDb5');
        $('#fullscreen').attr('title', 'Back To Bootsnipp');
    }    
    $('#fullscreen').on('click', function(event) {
        event.preventDefault();
        window.parent.location =  $('#fullscreen').attr('href');
    });
    $('#fullscreen').tooltip();
    /* END DEMO OF JS */
    
    $('.navbar-toggler').on('click', function(event) {
        event.preventDefault();
        $(this).closest('.navbar-minimal').toggleClass('open');
    })
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Minimal Menu"
Bootstrap 3.1.0 Snippet by sinasafaei

Related: See More

Questions / Comments:

"Minimal Menu" Bootstrap 3.1.0 Snippet by sinasafaei

Related: See More

Questions / Comments:

"Minimal Menu"
Bootstrap 3.1.0 Snippet by sinasafaei