Simple Responsive Navigation Menu

September 20, 2016
0 Comments


We can use different types of plugins for arranging responsive menus in a website. Framework is one of the best plugins.

Responsive Navigation Menu egs:

Here you can see a sample HTML markup for the responsive simple dropdownmenu :

<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<!-- Animate -->
<link href="http://bootsnav.com/css/animate.css" rel="stylesheet">
<!-- Bootsnav -->
<link href="http://bootsnav.com/css/bootsnav.css" rel="stylesheet">
view raw Responsive_navigation_menu.css hosted with ❤ by GitHub
<!-- Start Navigation -->
<nav class="navbar navbar-default bootsnav" style="background-color:#000;">
<div class="container">
<!-- Start Header Navigation -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu" style="background-color:#000 !important;">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#brand"><img src="http://1.bp.blogspot.com/-jhtHCfcfs3s/V1Z8Q6rZuqI/AAAAAAAAAds/yTYZ_oBaiJUIzOjnT8uZrgS8P1enuYhVQCK4B/s1600/OWNGEEK.png" class="logo"
style="width: 88px; background: black;padding: 10px; margin-top: -5px; float: left;"alt=""></a>
</div>
<!-- End Header Navigation -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right" data-in="fadeInDown" data-out="fadeInUp">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Dropdown</a>
<ul class="dropdown-menu" style="background-color:#000;">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
<ul class="dropdown-menu" style="background-color:#000;">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >Sub Menu</a>
<ul class="dropdown-menu" style="background-color:#000;">
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
<li><a href="#">Custom Menu</a></li>
</ul>
</li>
<li><a href="#">Custom Menu</a></li>
</ul>
</li>
<li><a href="#">Custom Menu</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<!-- End Navigation -->
view raw Responsive_navigation_menu.html hosted with ❤ by GitHub
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootsnavs -->
<script src="http://bootsnav.com/js/bootsnav.js"></script>
view raw Responsive_navigation_menu.js hosted with ❤ by GitHub

vivek madathil

Related Posts:

No comments :

Post a Comment

Instagram