Tutorial: Creating a responsive menu in jQuery, HTML5 and CSS
Today we present a small and nice tutorial about creating a responsive menu in jQuery, HTML5 and CSS.
Style elements, use media queries to build a responsive menu in jQuery
A little bit of HTML and CSS, a little bit of jQuery and ready. A nice effect reached pretty easily. See an example below.

First step is to create HTML5 markup for our menu, for example:
... <nav class="menu"> <ul class="active"> <li class="current-item"><a href="#">Home</a></li> <li><a href="#">Work</a></li> <li><a href="#">About</a></li> <li><a href="#">Get in Touch</a></li> <li><a href="#">Blog</a></li> </ul> <a class="toggle-nav" href="#">☰</a> <form class="search-form"> <input type="text"> <button>Search</button> </form> </nav> ...
Please take a look at:
<a class="toggle-nav" href="#">☰</a>
This element will be a toggle button to show/hide the menu. It will be visible on smaller resolutions.
The second step is styling the elements with CSS. Please take a look at media queries.
.toggle-nav { display:none; } /*----- Menu -----*/ @media screen and (min-width: 860px) { .menu { width:100%; padding:10px 18px; box-shadow:0px 1px 1px rgba(0,0,0,0.15); border-radius:3px; background:#303030; } } .menu ul { display:inline-block; } .menu li { margin:0px 50px 0px 0px; float:left; list-style:none; font-size:17px; } .menu li:last-child { margin-right:0px; } ...
See the tutorial / demo for the full CSS code.
The last step will be implementation of toggling. Here is jQuery based code:
jQuery(document).ready(function() { jQuery('.toggle-nav').click(function(e) { jQuery(this).toggleClass('active'); jQuery('.menu ul').toggleClass('active'); e.preventDefault(); }); });
Responsive menu ready to work.
Demo:
http://demos.inspirationalpixels.com/responsive-menu
Read full tutorial about creating a responsive menu in jQuery:
http://inspirationalpixels.com/tutorials/creating-a-responsive-menu-with-html-css-jquery
You may also like:
jQuery sliding menu plugin in mobile app style
Horizontal and responsive Microsoft-like drop-down menu
jQuery Amazon like menu – mega sidebar menu plugin
jQuery sticky menu navigation – stickUp
FerroMenu – jQuery rounded menu with CSS3
Tutorial: Mustache JS, jQuery and Express JS in action
Nexus like sidebar menu with CSS3 and JavaScript
Enjoy!
Related Posts
-
jQuery Virtual Tour – panorama viewer plugin
No Comments | Nov 9, 2015 -
AlertifyJS – pretty JavaScript notifications
No Comments | Feb 16, 2016 -
Ghost-style jQuery notification plugin – goNotification
No Comments | Mar 25, 2016 -
AJAX PayPal – shopping cart jQuery plugin
No Comments | Dec 9, 2015