"Responsive Dropdown Menu"
Bootstrap 4.0.0 Snippet by xBootstrap.com

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="main"> <div class="container"> <nav> <div class="nav-xbootstrap"> <ul> <li><a href="https://xbootstrap.com">Home</a></li> <li><a href="javascript:void(0)">Web Design<span class="glyphicon glyphicon-chevron-down iconsize"></span></a> <ul class="dropdown"> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> <li><a href="">Javascript</a></li> <li><a href="">JQuery</a></li> </ul> </li> <li><a href="javascript:void(0)" >Blogger<span class="glyphicon glyphicon-chevron-down iconsize"></span></a> <ul class="dropdown"> <li><a href="https://xbootstrap.com">Widget</a></li> <li><a href="https://xbootstrap.com">Tips</a></li> </ul> </li> <li><a href="javascript:void(0)" >Website SEO<span class="glyphicon glyphicon-chevron-down iconsize"></span></a> <ul class="dropdown"> <li><a href="https://xbootstrap.com">Tools</a></li> <li><a href="https://xbootstrap.com">Backlink</a></li> </ul> </li> <li><a href="https://xbootstrap.com">Free Themes</a></li> <li><a href="https://xbootstrap.com">Premium Themes</a></li> <li><a href="https://xbootstrap.com">Business</a></li> </ul> </div> <div class="nav-bg-xbootstrap"> <div class="navbar-xbootstrap"> <span></span> <span></span> <span></span> </div> <a href="https://xbootstrap.com" class="title-mobile">xBOOTSTRAP.COM</a> </div> </nav> <div class='content'> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: #F0F0F0; font-size: 15px; color: #666; font-family: 'Bitter', sans-serif; } .content { height: 200px; } a { text-decoration: none; } .container { max-width: 1200px; margin: 0 auto; width: 100%; } .nav-xbootstrap { display: block; margin-bottom: 15px 0; background: #03A9F4; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); border-radius: 3px; } .iconsize { font-size: 12px; top: 2px; left: 3px; } .nav-xbootstrap ul { list-style-type: none; margin: 0; padding: 0; display: block; } .nav-xbootstrap li { list-style-type: none; margin: 0; padding: 0; display: inline-block; position: relative; font-size: 14; color: #def1f0; } .nav-xbootstrap li a { padding: 15px 20px; font-size: 14; color: #def1f0; display: inline-block; outline: 0; font-weight: 400; text-decoration: none; } .nav-xbootstrap li:hover ul.dropdown { display: block; } .nav-xbootstrap li ul.dropdown { position: absolute; display: none; width: 200px; background: #2980B9; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); padding-top: 0; } .nav-xbootstrap li ul.dropdown li { display: block; list-style-type: none; } .nav-xbootstrap li ul.dropdown li a { padding: 15px 20px; font-size: 15px; color: #fff; display: block; font-weight: 400; } .nav-xbootstrap li ul.dropdown li:last-child a { border-bottom: none; } .nav-xbootstrap li:hover a { background: #2980B9; color: #fff !important; } .nav-xbootstrap li:first-child:hover a { border-radius: 3px 0 0 3px; } .nav-xbootstrap li ul.dropdown li:hover a { background: rgba(0,0,0, .1); } .nav-xbootstrap li ul.dropdown li:first-child:hover a { border-radius: 0; } .nav-xbootstrap li:hover .arrow-down { border-top: 5px solid #fff; } .arrow-down { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #def1f0; position: relative; top: 15px; right: -5px; content: ''; } .title-mobile { display: none; } @media only screen and (max-width:900px) { .nav-xbootstrap { background: #fff; width: 200px; height: 100%; display: block; position: fixed; left: -200px; top: 0px; -webkit-transition: left 0.25s ease; -moz-transition: left 0.25s ease; -ms-transition: left 0.25s ease; -o-transition: left 0.25s ease; transition: left 0.25s ease; margin: 0; border: 0; border-radius: 0; overflow-y: auto; overflow-x: hidden; height: 100%; } .title-mobile { position: fixed; display: block; top: 10px; font-size: 20px; left: 100px; right: 100px; text-align: center; color: #FFF; } .nav-xbootstrap.visible { left: 0px; -webkit-transition: left 0.25s ease; -moz-transition: left 0.25s ease; -ms-transition: left 0.25s ease; -o-transition: left 0.25s ease; transition: left 0.25s ease; } .nav-bg-xbootstrap { display: inline-block; vertical-align: middle; width: 100%; height: 50px; margin: 0; position: absolute; top: 0px; left: 0px; background: #03A9F4; padding: 12px 0 0 10px; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); } .navbar-xbootstrap { display: inline-block; vertical-align: middle; height: 50px; cursor: pointer; margin: 0; position: absolute; top: 0; left: 0; padding: 12px; } .navbar-xbootstrap span { height: 2px; background: #fff; margin: 5px; display: block; width: 20px; } .navbar-xbootstrap span:nth-child(2) { width: 20px; } .navbar-xbootstrap span:nth-child(3) { width: 20px; } .nav-xbootstrap ul { padding-top: 50px; } .nav-xbootstrap li { display: block; } .nav-xbootstrap li a { display: block; color: #505050; font-weight: 600; } .nav-xbootstrap li:first-child:hover a { border-radius: 0; } .nav-xbootstrap li ul.dropdown { position: relative; } .nav-xbootstrap li ul.dropdown li a { background: #2980B9 !important; border-bottom: none; color: #fff !important; } .nav-xbootstrap li:hover a { background: #03A9F4; color: #fff !important; } .nav-xbootstrap li ul.dropdown li:hover a { background: rgba(0,0,0,.1); !important; color: #fff !important; } .nav-xbootstrap li ul.dropdown li a { padding: 10px 10px 10px 30px; } .nav-xbootstrap li:hover .arrow-down { border-top: 5px solid #fff; } .arrow-down { border-top: 5px solid #505050; position: absolute; top: 20px; right: 10px; } .cover-bg { background: rgba(0,0,0,0.5); position: fixed; top: 0; bottom: 0; left: 0; right: 0; } @media only screen and (max-width:1199px) { .container { width: 96%; } .fixed-top { position: fixed; top: 0; right: 0; left: 0; }
$(document).ready(function(){ $('.navbar-xbootstrap').click(function(){ $('.nav-xbootstrap').toggleClass('visible'); $('body').toggleClass('cover-bg'); }); });

Related: See More


Questions / Comments: