Demo1



Demo2



Demo3



Help

Step1:include js and css files.

<link href="css/webwidget_menu_glide.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/webwidget_menu_glide.js"></script>

Step2:create html tag.

<div id="webwidget_menu_glide" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li><a href="http://www.htmldrive.net/">Home</a></li>

<li><a href="http://www.htmldrive.net/">News</a></li>
<li class="current"><a href="http://www.htmldrive.net/">About</a></li>
<li><a href="http://www.htmldrive.net/">Contact</a></li>

<li><a href="http://www.htmldrive.net/">More...</a></li>
</ul>
<div style="clear: both"></div>

</div>

Step3:add script.

<script language="javascript" type="text/javascript">
$(function() {
$("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#CCC", menu_sprite_color:"#666", menu_background_color:"#000", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });
});
</script>

parameter explanation

menu_width: Menu width
menu_height: Menu height
menu_text_size: Menu text size
menu_text_color: Menu text color
menu_sprite_color: Animation sprite color
menu_background_color: Menu background color
menu_margin: Menu margin
sprite_speed: Animation speed (option: slow, normal,fast,no-wait )
More script and css style : www.htmldrive.net