Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>Bootstrap 3 Inline Drop Down</title>
</head> 
<body>
  
  
    <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 active">
              <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 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>
                <li><a href="#">Dropdown 2 Child 2</a></li>
                <li><a href="#">Dropdown 2 Child 3</a></li>
                <li><a href="#">Dropdown 2 Child 4</a></li>
          </ul>
         </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  
<div class="container" id="page">
  Me finks this is a page.
  
  </div>
  
</body>
</html>
 
@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:#e7e7e7;
        padding: 0;
    }
​
    .navbar-nav.nav .dropdown-menu > li { float: left }
​
    .navbar-nav.nav .dropdown-menu > li > a {
        width: auto !important;
        background: transparent;
        line-height: 49px;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
    }
  
  /* active show child menu */
    .navbar-nav .dropdown.active ul {display:inline;}  
  
}
​
​
​
 
​
$( '.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');  
​
  }
    
});
​
// Hide the .nav-bg BUT not if .dropdown has class .active
$(document).on('click touchstart', function (a) {
  
        if (!$(".nav-bg").hasClass('active')){
               $('html').removeClass('menu-open');
        }
  
});
​
​
 $(window).on("load resize", function() {
    if ($(window).width() >= 768) {
​
        if ($('.navbar-nav.nav .dropdown').hasClass('active')) {
            $('html').addClass('menu-open');
         }
    }
});
​
​
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers