The simple and lightweight (1K) responsive-navigation jQuery plug-in enables creating responsive menus for your website.
It uses font-awesome icons with the menu item and also creates a sub-menu that is adaptive to the user’s screen.
Developer’s page Download plug-in
Setting up responsive-navigation plug-in
You need to include the 1Kb main.js file before the body closing tag (after jQuery library).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="js/responsive-navigation/main.js"></script>
Also include the style.css and font-awesome CSS file in the <head> section:
<link rel=”stylesheet” href=”css/responsive-navigation/style.css”>
<link href=”//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css” rel=”stylesheet”>
The markup for creating menu
The markup contains the <nav> tag with <ul>, <li>, and <a> tags as shown in the demo below.
A demo of a responsive jQuery menu with CSS
For the demo, a few top menu and sub-menu items are created. The font-awesome icons are used for the top menu items. The main items with submenu contain a down arrow that distinguishes it from the items without submenu. Have a look at the demo and code:
The markup for this example for creating the navigation bar:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/responsive-navigation/style.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
</head>
<body>
<!-- header starts -->
<header>
<!-- responsive nav bar -->
<div class="nav-bar">
<a href=""><i class="fa fa-bars"></i><span>Menu</span></a>
</div>
<!-- navigation -->
<nav>
<ul>
<li><a href="https://www.jquery-az.com/"><i class="fa fa-home"></i>Tutorials</a></li>
<li><a href="https://www.jquery-az.com/privacy-policy/"><i class="fa fa-cog"></i>Privacy</a></li>
<li class="sub-menu">
<a href="https://www.jquery-az.com/jquery-tips/"><i class="fa fa-street-view"></i>jQuery <i class="fa fa-angle-down"></i></a>
<!-- children nav -->
<ul class="children">
<li><a href="https://www.jquery-az.com/tag/modals/"><span>-</span> Tutorials</a></li>
<li><a href="https://www.jquery-az.com/tag/table/"><span>-</span> Plug-ins</a></li>
<li><a href="https://www.jquery-az.com/tag/sliders/"><span>-</span> Sliders</a></li>
<li><a href="https://www.jquery-az.com/tag/animations/"><span>-</span> Animations</a></li>
<li><a href="https://www.jquery-az.com/tag/forms/"><span>-</span> Forms</a></li>
</ul>
</li>
<li class="sub-menu"><a href="#"><i class="fa fa-eye-slash"></i>Web <i class="fa fa-angle-down"></i></a>
<ul class="children">
<li><a href="https://www.jquery-az.com/css-tutorials/"><span>-</span> CSS</a></li>
<li><a href="https://www.jquery-az.com/html-tutorials/"><span>-</span> HTML</a></li>
<li><a href="https://www.jquery-az.com/bootstrap-tips-tutorials/"><span>-</span> Bootstrap</a></li>
<li><a href=""><span>-</span> </a></li>
</ul>
</li>
<li><a href="https://www.jquery-az.com/contact/"><i class="fa fa-envelope"></i>Contact</a></li>
</ul>
</nav> <!-- navigation end -->
</header> <!-- header end -->
<!-- body contents -->
<div class="content">
<h2>What is Lorem Ipsum?</h2>
<p><strong>>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="content">
<h2>What is Lorem Ipsum?</h2>
<p><strong>>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="content">
<h2>What is Lorem Ipsum?</h2>
<p><strong>>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="content">
<h2>What is Lorem Ipsum?</h2>
<p><strong>>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/responsive-navigation/main.js"></script>
</body>
</html>
If you notice at the first div, this is for responsive or small devices like smartphones. Try resizing your screen and this is how it should look:
A demo of changing the color scheme of the menu
The plug-in comes up with a style.css file that specifies the colors and other properties of the navigation bar.
You may modify the CSS easily and customize the navigation colors, text properties, etc.
See this demo where I have changed a few properties of CSS to change the look of it:
Only the reference to the style file is changed in the above demo from style.css to style2.css.
I have changed only a few classes for illustration including:
header nav {
background: #408080;
z-index: 1000;
width:100%;
margin:auto;
}
header nav ul li:hover{
background: #DFDF00;
}
header nav ul li:hover i{
color:#004000;
}
Just play with it and apply the style, font, etc as you need.
Full CSS file (style2.css) code:
*{
padding:0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
header {
width: 100%;
}
.nav-bar{
display: none;
}
header nav {
background: #408080;
z-index: 1000;
width:100%;
margin:auto;
}
header nav ul {
list-style: none;
}
header nav ul li {
float: left;
position: relative;
}
header nav:after{
content: "";
display: block;
clear: both;
}
header nav ul li a{
color: #fff;
display: block;
padding: 20px;
text-decoration: none;
font-size: 20px;
font-family: tahoma;
}
header nav ul li:hover{
background: #DFDF00;
}
header nav ul li:hover i{
color:#004000;
}
header nav ul li i{
margin-right: 10px;
}
header nav ul li:hover .children{
display: block;
}
header nav ul li .children{
display: none;
background: #DD6F00;
position: absolute;
width: 150%;
z-index: 1000;
}
header nav ul li .children span{
display: none;
}
header nav ul li .children li{
display: block;
width: 100%;
border-bottom: 1px solid #ffffff99;
}
header nav ul li .children li a{
margin-left: 30px;
}
header nav ul li .fa-angle-down{
position: relative;
top: 3px;
}
/*responsive nav style*/
@media all and (max-width: 800px) {
body{
padding-top:80px;
}
.nav-bar{
display: block;
width: 100%;
position: fixed;
top: 0;
background: #3498db;
}
.nav-bar span{
float: left;
font-size: 20px;
padding: 20px;
color: #fff;
}
.nav-bar .fa-bars{
display: block;
padding: 20px;
color: #fff;
overflow: hidden;
font-size: 20px;
font-weight: bold;
text-decoration: none;
float: right;
}
header nav{
width: 80%;
height: auto;
position: fixed;
right: 100%;
top :63px;
overflow: hidden;
}
header nav ul li{
display: block;
border-bottom: 1px solid rgba(255,255,.5);
width: 100%;
}
header ul li a{
display: block;
}
header nav ul li .children{
width: 100%;
position: relative;
overflow: hidden;
display: none;
}
header nav ul li:hover .children{
display: none;
}
header nav ul li ul li:first-child{
border-top: 1px solid #ffffff99;
}
header nav ul li .children span{
display: inline-block;
margin-right: 10px;
}
header nav ul li .children a{
margin-left: 10px;
padding: 5px 0;
}
header nav ul li .fa-angle-down {
position: relative;
top: 3px;
}
}