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