Simple Slider Menu

Here we have made a simple slider menu.

On clicking the <h4> Category One </h4> the <li> (lists) which are its siblings slides down together.


Same applies on:

<h4> Category Two </h4>,

<h4> Category Three </h4>,

<h4> Category Four </h4>
.

Slider Menu + Hover Effects

This menu is basically same as the above one. The only addition to this one is the hover effect we have applied here on the <li> .

What we have done?

We have changed the Opacity of menu links <li> <a> </a> <li> to 0.6 using jQuery and changed it back to the default value of 1 on hovering each <li> .

For the hover effect the jQuery code is as follows: 

$(' #menu2 ul li ').hover(function(){
  $(this).css({ opacity: '1' });

Here we have assigned the value of '0.6' using the opacity property of CSS on mouse in. 

  }, function(){
    $(this).css({ opacity: '0.6' });
Here again we changed the value for the Opacity property back to 0.6 on mouse out. 
});

Toggle Menu

Here we have assigned a simple toggle effect which activates on clicking the <h4> Category One </h4> and shows its siblings <li>.