How to Toggle a Menu Bar Using JQuery

A simple code to toggle with active and non-active class in our menu bar using jquery, without using anything fancy code or long code, simple short and clean.

HTML

<div>
       <ul>

          <li>Home</li>

          <li>About Us</li>

          <li>Gallery</li>

          <li>Contact Us</li>

       </ul>

      </div>

Script

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
           $("li").addClass("notactive");

           $("li").click(function () {

           $('li').removeClass('active');

           $('li').addClass('notactive');

           $(this).toggleClass('active notactive');

           });

      </script>

Css


     <style type="text/css">

        .notactive:hover{background-color:aqua;cursor:pointer;}

        .active{background-color:red;cursor:pointer;}

      </style>

Description

In the above code i have create a ul list in HTML page, and then showing active inactive classses on those list using Jquery. Simple code for toggle class using jquery.