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="#">&#9776;</a>
 
    <form class="search-form">
        <input type="text">
        <button>Search</button>
    </form>
</nav>
...

Please take a look at:

<a class="toggle-nav" href="#">&#9776;</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!