Sliding JavaScript Menu Highlight Small Size

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.

1	<div class="menu">

2	<ul id="menu">

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

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

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

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

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

8

</ul>

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

10

</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.

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

This script has been tested in all major browsers and is available free of charge for both personal or commercial projects under the creative commons license. Community support is available here. Paid support is also available, contact me for details.

Click here to download the script.