jquery插件——下拉列表插件（jQuery Simple Drop-Down Menu Plugin）

第一步：引用jquery.min.js文件，代码：

<script src="jquery.min.js" type="text/javascript"></script>

 

第二步：拷贝和修改js代码

<script type="text/javascript">

var timeout         = 500;

var closetimer          = 0;

var ddmenuitem      = 0;

 

function jsddm_open()

{        jsddm_canceltimer();

         jsddm_close();

         ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

 

function jsddm_close()

{        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

 

function jsddm_timer()

{        closetimer = window.setTimeout(jsddm_close, timeout);}

 

function jsddm_canceltimer()

{        if(closetimer)

         {        window.clearTimeout(closetimer);

                   closetimer = null;}}

 

$(document).ready(function()

{        $('#jsddm > li').bind('mouseover', jsddm_open);

        

         });

 

document.onclick = jsddm_close;

</script>

 

第三步：定义或者修改对应的css

<style type="text/css">

/* menu styles */

#jsddm

{        margin: 0;

         padding: 0}

 

         #jsddm li

         {        float: left;

                   list-style: none;

                   font: 12px Tahoma, Arial;}

 

         #jsddm li a

         {        display: block;

            

                   padding: 5px 12px;

                   text-decoration: none;

                   border-right: 1px solid white;

                   white-space: nowrap}

 

         #jsddm li a:hover

         {}

                  

                   #jsddm li ul

                   {        margin: 2;

                            padding: 0;

                            position: absolute;

                            visibility: hidden;

                            border: 1px solid #000000;}

                  

                            #jsddm li ul li

                            {        float: none;

                                     display: inline}

                           

                            #jsddm li ul li a

                            {        width: auto;

                                     }

                           

                            #jsddm li ul li a:hover

                            {        background:#999999}

</style>

 

第四步：在需要用的地方定义对应的html代码

<ul id="jsddm">

         <li ><a href="#">更多▼</a>

           <ul>

                   <li><a href="#">Drop</a></li>

                            <li><a href="#">jQuery</a></li>

                            <li><a href="#">Aja</a></li>

                   </ul>

         </li>

  </ul>

 

总结：本人主要做一个类似goole那样的下拉列表“更多”，如图：

 

需求比较简单，不需要修改其插件提供者提供的js代码，修改一些对应的事件和css样式即可。

 

源码下载：http://download.youkuaiyun.com/source/2518511

 

插件demo下载：http://download.youkuaiyun.com/source/2518503

 

插件官网：http://javascript-array.com/scripts/jquery_simple_drop_down_menu/

这里还有更多的类似插件可以供大家选用。