How to create a active menu using jquery ~ sa

Active menu is used to identify which page is currently used by the user and it helpful to user to use your website without confusion. here is the easy way to create a active menu by using jquery.

DEMO

CSS File:

create id name as header and create a unordered list type for menu, display : inline-block is used to display your list type in a single row.


#header

{
 height:auto;
 width:600px;
 margin:auto;
 background:#09F;
}
#header ul li

{
 display:inline-block;
 text-decoration:none;
 padding:14px 30px;
 color:#fff;
 text-align:center;
 cursor:pointer;
}
#header ul li:hover

{
 background:#333;
}
.active

{
 background:#000;
}

Jquery Lib File:

jquery-1.9.1.min.js is the library file you can download it from www.jquery.com. without library file you can't able to run java script.

    <script src="../script/jquery-1.9.1.min.js"></script>

Jquery:

In the Jquery file, here we are using removeclass and addclass properties, which is used to add and remove the class. here active is the class name which i am using here.

$(document).ready(function(e) {
    $('#header ul li').click(function(e) {
    $('#header ul li').removeClass('active');
    $(this).addClass('active');
    });
});

HTML File:

In the HTML file add the class name active in the home menu so it will be active class in your website.

<div id="header">
    <ul>
        <li class="active">HOME</li>
        <li>ABOUT US</li>
        <li>CONTACT US</li>
    </ul>
</div>

sa