Navbar Dropdown On Hover for Desktop and On Click for Mobile/Tablet

Navbar Dropdown On Hover for Desktop and On Click for Mobile/Tablet

by rajnishw3

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
    <!-- Navigation Menu -->
	
	
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container nav-container">
		
			
			<div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		    </div>
		
		
            <div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="current-page-item ">
                        <a href="#" class="at-drop-down">Menu 1</a>
                        <ul class="sub-menu">
                            <!-- create parent link for mobile, hidden on desktop-->
                            <li class="current-page-item mobile-nav"> 
								<a href="#">Menu 1</a>
                            </li>
							
                            <li class=""> 
								<a href="#">Menu 11</a>
                            </li>
							
                            <li class=""> 
								<a href="#">Menu 12</a>
                            </li>
							
                            <li class=""> 
								<a href="#">Menu 13</a>
                            </li>
							
                            <li class=""> 
								<a href="#">Menu 14</a>
                            </li>
						
                        </ul>
                    </li>
                    <li class=""> 
						<a href="#" class="at-drop-down">Menu 2</a>
	                  ...

CSS

.mobile-nav{
    display: none;
}

.sub-menu{
    background: #eee;
    display: none;
    position: absolute;
    padding: 0;
}

.sub-menu li{
    list-style: none;
}
.sub-menu li a{
    border-bottom: 1px solid #ccc;
    display: block;
    padding: 5px 10px;
    white-space:nowrap;
}

@media (max-width: 767px){
    .mobile-nav{
        display: block;
    }

    .sub-menu{
        position: static;
    }
}

@media (min-width: 767px){
    .navbar-nav > li:hover > .sub-menu{
        display: block;
    }   
}

JavaScript

$(function(){
    
    $('.at-drop-down').on('click', function(e){
        if(Modernizr.mq('screen and (max-width:767px)')) {
            e.preventDefault();
            $(this).next($('.sub-menu')).slideToggle();
        }
    });
    
    $(window).resize(function() {
        $('.sub-menu').attr("style", "");
    });

});