JQuery Navigation Menu Examples

jQuery navigation menu examples

We have discussed jquery animation and effects,In   jQuery navigation menu examples, we will focus on jQuery effects and create an attractive and interactive navigation using CSS,and jQuery animation effects.

The most general and most used function is animate() Which runs a custom animation on the selected elements.

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.

We will focus on various jQuery effects and how they use,In our next blog.Right now we are focusing on the jQuery navigation menu.

JQuery navigation menu examples will teach you that, How to create interactive header jQuery navigation menu.

This blog is a collection of various jQuery navigation menu examples with various effects.

Let’ start how we can create a jQuery navigation menu.

We are using  ul/li  code pattern  to approach navigation by applying some CSS styling.

Create an HTML file and write following code in it.

                        <ul class="ul-main">
                            <li style="background-color: firebrick;" class="li-main">
                                <a class="active" href="#home">Home</a>
                                <ul class="ul-main" style="display: none;" >
                                    <li><a>Home 1</a></li>
                                    <li><a>Home 2</a></li>
                                    <li><a>Home 3</a></li>
                            <li style="background-color: navy;" class="li-main">
                                <a href="#about">About</a>
                                <ul class="ul-main" style="display: none;" >
                                    <li><a>About 1</a></li>
                                    <li><a>About 2</a></li>
                                    <li><a>About 3</a></li>
                            <li style="background-color: yellowgreen;" class="li-main">
                                <a href="#news">Services</a>
                                <ul class="ul-main" style="display: none;" >
                                    <li><a>Services 1</a></li>
                                    <li><a>Services 2</a></li>
                                    <li><a>Services 3</a></li>
                            <li style="background-color: slateblue;" class="li-main">
                                <a href="#contact">Contact</a>
                                <ul class="ul-main" style="display: none;" >
                                    <li><a>Contact 1</a></li>
                                    <li><a>Contact 2</a></li>
                                    <li><a>Contact 3</a></li>


Now, add some styling to recast them into navigated menu.

                background: url(back2.jpg) no-repeat center center fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
             .ul-main {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                /*background-color: #333;*/

            .li-main {
                float: left;

            li a {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                width: 100px;

            li a:hover {
                background-color: #111;

Add jquery.min.js to your file

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Now,consider the core part of this jQuery navigation menu.

Our aim is ,whenever the mouse hover on the menu,the sub-menu of particular parent menu should open.This is done by simple display:none and display:block .

But,This code will not make our code interactive and animated.To make the menu attractive and interactive ,we must need to use jQuery animation effects.

To do this , we need to focus on two events :

1.Mouse Hover

2.Mouse Out

There are many jQuery  effects ,but we will use jQuery slideUp and slideDown, as we are making navigation menu.

Add following code in your file.

            $(document).ready(function () {
                $('.li-main').hover(function () {
                    $(this).find('ul').slideDown().animate({display: 'block'});
                    $(this).find('ul').slideUp().animate({display: 'none'});


We have three sliding jQuery effects :




A toggle is a keyword in jQuery which works on two opposite parameters.

i.e The toggle() method toggles between hide() and show() for the selected elements.

Similarly , SlideToggle is a combined method of slideUp and slideDown ,and it also contains mouse hover and mouse out event together.

As jQuery works on the principle of  “Write Less ,Do More” so ,it is good to write as less as a possible code of jQuery .

Now,  we will replace above jQuery code with slideToggle  method.

                        $(document).ready(function () {
                            $('.li-main').hover(function () {

We can see that In above code we didn’t write hover/out event or slide up/down,though it is working same as the previous code.

Visit our jQuery regularly blogs to learn more about jQuery animation effects.

Other jQuery Resources:

jQuery Fading with examples

jQuery Animation Tutorial Guide

Interactive UI Development Using jQuery
I hope you will find this post very useful regarding jQuery Navigation. Let me know any questions if you have in comment regarding jQuery. I will reply you ASAP.

Have you got a cool idea about Web Application Development? Contact us Now to get a free consultation on your idea. Alphanso Tech is rated as one of the best Web Development Company in India.

Post by Milan Sanathara

I am iOS Application Developer with an aspiration of learning new technology and creating a bright future in Information Technology.

One Response to JQuery Navigation Menu Examples

  1. Pingback: jQuery navigation menu | Coding Tutes

Leave a Reply

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