Bootstrap Snippet Bootstrap NavBar 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="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">NavBar</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub</a></li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action [Menu 1.1]</a></li>
                        <li><a href="#">Another action [Menu 1.1]</a></li>
                        <li><a href="#">Something else here [Menu 1.1]</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link [Menu 1.1]</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link [Menu 1.1]</a></li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action [Menu 1.2]</a></li>
                                <li>
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
@media (min-width: 767px) {
    .navbar-nav .dropdown-menu .caret {
    transform: rotate(-90deg);
    }
}
body {
    padding-top: 50px;
}
.navbar-template {
    padding: 40px 15px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    $('.navbar a.dropdown-toggle').on('click', function(e) {
        var $el = $(this);
        var $parent = $(this).offsetParent(".dropdown-menu");
        $(this).parent("li").toggleClass('open');
        if(!$parent.parent().hasClass('nav'))
            $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
        $('.nav li.open').not($(this).parents("li")).removeClass("open");
        return false;
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Bootstrap NavBar"
Bootstrap 3.3.0 Snippet by detain

Related: See More

Questions / Comments:

"Bootstrap NavBar" Bootstrap 3.3.0 Snippet by detain

Related: See More

Questions / Comments:

"Bootstrap NavBar"
Bootstrap 3.3.0 Snippet by detain