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:
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.
});
Here we have assigned a simple toggle effect which activates on clicking the <h4> Category One </h4> and shows its siblings <li>.
Copyright © ajDeskta Blog. All rights reserved. Design and site maintenance by ajDeskta.