March 6, 2014 11:50 am

How to create Mobile Navigation Menu with CSS & jQuery

Mobile Navigation is one of the challenge work for web designers in responsive designs if site has many pages and sections then its very challenging to squeeze all the links in small mobile screen. So I am going to give you a tutorial on some designing tips and solve this problem with an easy procedures using CSS and jQuery and it helps you to merge your navigation and show proper menu to your mobile viewers.

How to create Mobile Navigation Menu with CSS & jQuery

[wpdm_file id=87]DEMO

Also Read: How to create Responsive Header Menu with CSS

Navigation markup

<div id="nav-wrap">
    <ul id="nav">
        <li><a href="https://www.phpgang.com/">Home</a></li>
        <li><a href="http://demo.phpgang.com/">Demo</a>
            <ul>
                <li><a href="http://www.wptutorialsacademy.com/">Wordpress</a></li>
                <li><a href="https://www.phpgang.com/category/jquery">jQuery</a></li>
                <li><a href="https://www.phpgang.com/category/php">PHP</a></li>
                <li><a href="https://www.phpgang.com/category/social">Facebook</a></li>
                <li><a href="https://www.phpgang.com/category/css">CSS</a></li>
            </ul>
        </li>
        <li><a href="https://www.phpgang.com/about">About</a></li>
        <li><a href="https://www.phpgang.com/request-tutorials-here">Contact</a></li>
        <li><a href="https://www.phpgang.com/advertisement">Advertisement</a></li>
    </ul>
</div>

Above Markup only shows a navigation menu.

CSS used to manage this navigation looks nice

<style type="text/css">
a {
    text-decoration: none;
    color: #39C;
}
#nav-wrap {
    margin-top: 20px;
}

#menu-icon {
    display: none;
}

#nav, #nav li {
    margin: 0;
    padding: 0;
}
#nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}
#nav a {
    padding: 4px 15px;
    display: block;
    color: #000;
    background: #ecebeb;
}
#nav a:hover {
    background: #f8f8f8;
}
#nav ul {
    background: #fff;
    padding: 2px;
    position: absolute;
    border: solid 1px #ccc;
    display: none; 
    width: 200px;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav li:hover > ul {
    display: block;
}
</style>

Above CSS used make Navigation looks nice and view-able on the website with sub navigation on demo link.

Now add @media query to output on device width let see how it works on devices with media.

<style type="text/css">
@media screen and (max-width: 600px) {    /* Devices below or equal to 600px */
#nav-wrap {
    position: relative;
}
#menu-icon {
        color: #000;
        width: 42px;
        height: 30px;
        background: #ecebeb url(https://www.phpgang.com/wp-content/themes/PHPGang_v2/img/menu-icon.png) no-repeat 10px center; /* show menu icon */
        padding: 8px 10px 0 52px;
        cursor: pointer;
        border: solid 1px #666;
        display: block; 
    }
    #menu-icon:hover {
        background-color: #f8f8f8; /* Color on hand over */
    }
    #menu-icon.active {
        background-color: #bbb;
    }
    #nav {
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 5px;
        background: #f8f8f8;
        border: solid 1px #999;
        display: none; 
    }
    #nav li {
        clear: both;
        float: none;
        margin: 5px 0 5px 10px;
    }
    #nav a, #nav ul a {
        font: inherit;
        background: none;
        display: inline;
        padding: 0;
        color: #666;
        border: none;
    }
    #nav a:hover, #nav ul a:hover {
        background: none;
        color: #000;
    }
    #nav ul {
        width: auto;
        position: static;
        display: block;
        border: none;
        background: inherit;
    }
    #nav ul li {
        margin: 3px 0 3px 15px;
    }
}
@media screen and (min-width: 600px) {
#nav {
        display: block !important;  /* as we have make nav display none on above media here is for desktop make it visible. */
    }
}
</style>

jQuery used to make dropdown show and hide on click event:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
    $('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');

    $("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });
});
</script>

That’s all about this tutorial you can check our demo and download script for free.

Altogether from our demo page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>How to create Mobile Navigation Menu with CSS & jQuery | PGPGang.com</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){

    /* prepend menu icon */
    $('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');

    /* toggle nav */
    $("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

});
</script>
<style type="text/css">
a {
    text-decoration: none;
    color: #39C;
}
#nav-wrap {
    margin-top: 20px;
}

/* menu icon */
#menu-icon {
    display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
    margin: 0;
    padding: 0;
}
#nav li {
    list-style: none;
    float: left;
    margin-right: 5px;
}

/* nav link */
#nav a {
    padding: 4px 15px;
    display: block;
    color: #000;
    background: #ecebeb;
}
#nav a:hover {
    background: #f8f8f8;
}

/* nav dropdown */
#nav ul {
    background: #fff;
    padding: 2px;
    position: absolute;
    border: solid 1px #ccc;
    display: none; /* hide dropdown */
    width: 200px;
}
#nav ul li {
    float: none;
    margin: 0;
    padding: 0;
}
#nav li:hover > ul {
    display: block; /* show dropdown on hover */
}
@media screen and (max-width: 600px) {

    /* nav-wrap */
    #nav-wrap {
        position: relative;
    }

    /* menu icon */
    #menu-icon {
        color: #000;
        width: 42px;
        height: 30px;
        background: #ecebeb url(menu-icon.png) no-repeat 10px center;
        padding: 8px 10px 0 52px;
        cursor: pointer;
        border: solid 1px #666;
        display: block; /* show menu icon */
    }
    #menu-icon:hover {
        background-color: #f8f8f8;
    }
    #menu-icon.active {
        background-color: #bbb;
    }

    /* main nav */
    #nav {
        clear: both;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
        padding: 5px;
        background: #f8f8f8;
        border: solid 1px #999;
        display: none; /* visibility will be toggled with jquery */
    }
    #nav li {
        clear: both;
        float: none;
        margin: 5px 0 5px 10px;
    }
    #nav a, 
    #nav ul a {
        font: inherit;
        background: none;
        display: inline;
        padding: 0;
        color: #666;
        border: none;
    }
    #nav a:hover, 
    #nav ul a:hover {
        background: none;
        color: #000;
    }

    /* dropdown */
    #nav ul {
        width: auto;
        position: static;
        display: block;
        border: none;
        background: inherit;
    }
    #nav ul li {
        margin: 3px 0 3px 15px;
    }

}

@media screen and (min-width: 600px) {

    /* ensure #nav is visible on desktop version */
    #nav {
        display: block !important;
    }

}
</style>
</head>
  <body>
      <h2>How to create Mobile Navigation Menu with CSS & jQuery example.&nbsp;&nbsp;&nbsp;=> <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>

<div id="nav-wrap">
    <ul id="nav">
        <li><a href="https://www.phpgang.com/">Home</a></li>
        <li><a href="http://demo.phpgang.com/">Demo</a>
            <ul>
                <li><a href="http://www.wptutorialsacademy.com/">       Wordpress   </a></li>
                <li><a href="https://www.phpgang.com/category/jquery">   jQuery      </a></li>
                <li><a href="https://www.phpgang.com/category/php">      PHP         </a></li>
                <li><a href="https://www.phpgang.com/category/social">   Facebook    </a></li>
                <li><a href="https://www.phpgang.com/category/css">      CSS         </a></li>
            </ul>
        </li>
        <li><a href="https://www.phpgang.com/about">About</a></li>
        <li><a href="https://www.phpgang.com/request-tutorials-here">Contact</a></li>
        <li><a href="https://www.phpgang.com/advertisement">Advertisement</a></li>
    </ul>
</div>
</body>
</html>
[wpdm_file id=87]DEMO

I hope you like this tutorial and please don’t forget to comment your suggestions and do share this with your friends.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

One response to “How to create Mobile Navigation Menu with CSS & jQuery”

  1. admin!
    post some feature abt mobile jquery!!

Leave a Reply

Your email address will not be published. Required fields are marked *