一个简单的JQUERY下拉菜单插件

 一.按照惯例，先上DOM结构

<div id="menu"> 
            <ul> 
                <li> 
                    <a href="#nogo">主菜单一</a> 
                    <ul> 
                        <li><a href="http://usual.blog.51cto.com">子菜单一</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单一</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单一</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单一</a></li> 
                    </ul> 
                </li> 
 
                <li> 
                    <a href="#nogo">主菜单二</a> 
                    <ul> 
                        <li><a href="http://usual.blog.51cto.com">子菜单二</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单二</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单二</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单二</a></li> 
                    </ul> 
                </li> 
 
                <li> 
                    <a href="#nogo">主菜单三</a> 
                    <ul> 
                        <li><a href="http://usual.blog.51cto.com">子菜单三</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单三</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单三</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单三</a></li> 
                    </ul> 
                </li> 
 
                <li> 
                    <a href="#nogo">主菜单四</a> 
                    <ul> 
                        <li><a href="http://usual.blog.51cto.com">子菜单四</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单四</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单四</a></li> 
                        <li><a href="http://usual.blog.51cto.com">子菜单四</a></li> 
                    </ul> 
                </li> 
             
            </ul> 
         
         
        </div> 

二.有了DOM结构，再确定样式

#menu{ 
                font-family:Helvetica; 
            } 
            #menu ul{ 
                list-style:none; 
                margin:0px; 
                padding:0px; 
                width:250px; 
            } 
            #menu ul li{ 
                margin:1px 0px; 
                padding:0px; 
                 
            } 
            #menu ul li a{ 
                height:30px; 
                line-height:30px; 
                padding-left:10px; 
                display:block; 
                text-decoration:none; 
                font-weight:bold; 
                color:#333; 
                font-size:16px; 
                border:1px solid #ccc; 
            } 
            #menu ul li a:Hover{ 
                background:#a0b4dc; 
            } 
            #menu ul li li a{ 
                border:none; 
                height:25px; 
                line-height:25px; 
            } 
            #menu ul li li a:hover{ 
                background:yellow; 
            } 
            #menu ul li ul{ 
                display:none; 
            } 

三.然后就是最重要的JQUERY部分了

 

(function($){ 
    $.fn.slideMenu=function(){ 
        return this.each(function(){ 
            var menu=$(this); 
            menu.find("ul li>a").bind("click",function(event){ 
                var currentLink=$(event.currentTarget); 
                if(currentLink.parent().find("ul.active").size()==1){       //如果被点击的连接的子菜单已经显示了，就隐藏该子菜单 
                    hide(currentLink); 
                 
                } 
                else if(menu.find("ul li ul.active").size()==0){            //如果所有的子菜单都没有显示，则显示点击的子菜单 
                     
                    show(currentLink); 
                 
                } 
                else{                                                       //显示点击的子菜单，隐藏已显示的子菜单 
                    menu.find("ul li ul.active").slideUp("medium",function(){ 
                     
                        menu.find("ul li ul").removeClass("active"); 
                        show(currentLink); 
                     
                    }); 
                } 
 
 
 
            }); 
            var show=function(currentLink){                                 //显示子菜单方法 
                currentLink.parent().find("ul").addClass("active"); 
                currentLink.parent().find("ul").slideDown("medium"); 
             
            } 
 
            var hide=function(currentLink){                                 //隐藏子菜单方法 
                currentLink.parent().find("ul").removeClass("active"); 
                currentLink.parent().find("ul").slideUp("medium"); 
             
            } 
        }); 
    } 
 
 
})(jQuery); 

四.引用。

$(document).ready(function(){ 
        $("#menu").slideMenu(); 
     })