Post Top Ad

Post Top Ad

Monday, June 9, 2008

sliding javascript menu highlight 1kb




This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”. The markup for the script is very simple as below…


<div class="menu">

<ul id="menu">

<li><a href="#">JavaScript</a></li>

<li><a href="#">Graphic Design</a></li>

<li><a href="#">HTML</a></li>

<li value="1"><a href="#">User Interface</a></li>

<li><a href="#">CSS</a></li>

</ul>

<div id="slide"></div>

</div>


In the above code the default menu selection is identified by the value=”1″ attribute on the appropriate list item. To initialize the script simply call the function as below…


menuSlider.init('menu','slide')


The first variable is the id of the unordered list and the second is the id of the slider div. This script has been tested in IE6, IE7, FireFox, Opera and Safari. Please send any bug reports to michael@leigeber.com. This code is free to use for any personal or commercial projects.


Click here to download the script.

No comments:

Post a Comment