Bootstrap Snippet nav bar horizontal 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="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Link</a></li>
             </ul>
             </li>
             
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Dropdown 2 Child 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
@media (min-width:768px) { 
  
  body { padding-top: 60px } /* height of the menu collapsed */
  .nav-bg {
        height: 0px;
        width: 100%;
        position: absolute;
        top: 50px;
        background: #e7e7e7;
        transition: all .5s ease-in-out;
    }
    .menu-open .nav-bg { height: 50px } /* change to your height of the child menu */
  
    .menu-open #page {
        padding-top:60px;
        transition: all .2s ease-in-out;
    }
  
  #page {      height:1000px;/* demo only */
}
    .navbar-nav.nav > li { position: static }
    .navbar-nav.nav .dropdown-menu {
        left: 0 !important;
        right: 0 !important;
        box-shadow: none;
        border: none;
        margin: 0 auto;
        max-width: 1170px;
        background: transparent;
        padding: 0;
    }
    .navbar-nav.nav .dropdown-menu > li { float: left }
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() {
    $( '.navbar' ).append( '<span class="nav-bg"></span>' );
    
    
    $('.dropdown-toggle').click(function () { 
      
      if (!$(this).parent().hasClass('open')) {
      
            $('html').addClass('menu-open');  
        
      } else {
        
         $('html').removeClass('menu-open');  
    
    }
        
    });
    
    
    $(document).on('click touchstart', function (a) {
            if ($(a.target).parents().index($('.navbar-nav')) == -1) {
                    $('html').removeClass('menu-open');  
            }
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"nav bar horizontal"
Bootstrap 3.3.0 Snippet by erda19

Related: See More

Questions / Comments:

"nav bar horizontal" Bootstrap 3.3.0 Snippet by erda19

Related: See More

Questions / Comments:

"nav bar horizontal"
Bootstrap 3.3.0 Snippet by erda19