Multicolor animation drop down navigation menu with jQuery
Demo1
Demo2
Usage
Add js and css files
<link href="css/webwidget_menu_dropdown.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_dropdown.js"></script>
Add html
<div class="webwidget_menu_dropdown">
<ul>
<li class="current"><a href="link1">Menu1</a>
<ul>
<li><a href="link1">submenu1</a>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link2">Menu2</a>
<ul>
<li><a href="link1">submenu1</a>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
<li><a href="link3">Menu3</a>
<ul>
<li><a href="link1">submenu1</a>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul></li>
<li><a href="link4">Menu4</a>
<ul>
<li><a href="link1">submenu1</a>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul></li>
<li><a href="link5">Menu5</a>
<ul>
<li><a href="link1">submenu1</a>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul></li>
<li><a href="link6">Menu6</a>
<ul>
<li><a href="link1">submenu1</a>
</li>
<li><a href="link2">submenu2</a></li>
<li><a href="link3">submenu3</a></li>
<li><a href="link4">submenu4</a></li>
<li><a href="link5">submenu5</a></li>
<li><a href="link6">submenu6</a></li>
</ul>
</li>
</ul>
<div style="clear: both"></div>
</div>
Add startup script.
$(function(){
$("#webwidget_menu_dropdown").webwidget_menu_dropdown({
m_w: '100', //Menu width
m_t_c: '#FFF', //Text color
m_c_c: '#8FC45A', //Current background color
m_bg_c: '#56A901', //background color
m_b_s: '2', //Menu margin
m_bg_h_c: '#8FC45A', //Mouse hover color
s_s: 'fast', //Animation speed: slow normal fast no-wait
m_s: 'small' //Menu size:large medium small
});
});
Copyright 2010 htmldrive.net Inc.
@projectHomepage: http://www.htmldrive.net/items/preview/18/Multicolor-animation-drop-down-navigation-menu-with-jQuery.html
@projectDescription: Multicolor animation drop down navigation menu with jQuery.
@author: htmldrive.net
More script and css style : htmldrive.net
@version 1.0
@license http://www.apache.org/licenses/LICENSE-2.0