自己写的一个基于jquery多级菜单插件

此插件是基于jquery的。

// JavaScript Document
(function($){
          $.fn.multimenu=function(object)//插件名称multimenu
          {
              var defaults={
                  float:'left',
                  method:'h',//横向菜单还是纵向菜单，h为横向，v为纵向
                  width:'100px',//为纵向时菜单的宽度
                  padding:'10px 0px 10px 10px',
                  bg:'#CC0099',
                  add:" » "//有菜单时的提示符号，默认“》"
           
              }
              defaults=$.extend(defaults,object);
              $("li ul li:has(ul)",this).find("a:first").append(defaults.add);//为有子菜单的项添加上提示符
              if(defaults.method=='h'){//若为横向菜单，都把第一个ul的position定义为relative，有利于后面子菜单的定位
                                        $(this).css({'position':'relative','list-style':'none'});
                                        $('>li',this).prepend("<span>|</span>")
                                        }
                                        else if(defaults.method=='v')
                                        {//纵向菜单一般要定义一个固定宽度
                                            $(this).css({'position':'relative','list-style':'none','float':'none','width':defaults.width});
                                        }
                                        $('>li',this).css({'display':'block','padding':'5px 5px 5px 0px','float':defaults.method=='v'?'none':defaults.float});
                                        $('li ul',this).hide();//第一次加载时隐藏子菜单
               this.each(function(){                                
                                        var topmenu=$('li:has(ul)',this);//找到有子菜单的li
                                       
                                       
                                        topmenu.hover(function(){
                                                             
                                        var $folder = $(this);
 
                                      var $sub_folder = $folder.find('ul:eq(0)');//
             this._dimension = {
                 w: this.offsetLeft,
                 h: this.offsetHeight,//控件的绝对高度
                 hh:this.offsetTop,
                ww:this.offsetWidth,//控件的绝对宽度
                subWidth: $sub_folder.outerWidth(),
                subHeight: $sub_folder.outerHeight()
           };
        //判断当前的元素是否top menu
        //因为sub menu会位于top menu的下方，而third menu是位于sub menu的右侧或者左侧，而这的top值会不同
        this.isTop = $folder.parents('ul').length == 1 ? true : false;
        $sub_folder.css({
            top: this.isTop? (defaults.method=='h'?this._dimension.h + 'px' :this._dimension.hh + 'px'): this._dimension.hh + 'px'
        });
                        //坐标
            this._offsets = {
                left: $(this).offset().left,//
                top: $(this).offset().top
            }
            //如果当前的元素位于顶层，那么sub menu的left值为0，即位于当前元素的正下方
            //否则，left值为当前元素的宽度，即位于当前元素的正右方
            var menuleft = this.isTop ? (defaults.method=='h'?this._dimension.w :this._dimension.ww): (this._dimension.ww);

            //判断弹出的菜单是否超出屏幕宽度
            //若超出，则显示在当前元素的左侧，否则显示在右侧
           menuleft = (menuleft + this._dimension.subWidth > $(window).width()) ? (this.isTop ? -this._dimension.subWidth + this._dimension.w : -this._dimensions.w) : menuleft;
            //目标对象没有运行动画
            if (!$sub_folder.is(':animated')) {
                $sub_folder.css({
                    left: menuleft + 'px',
                    width: this._dimension.subWidth,
                    position:'absolute',
                   
                                    }).slideDown('normal');//显示
            }
       
       
       
       
       
                                           },
                                           function(){
                                              
            //目标对象
            var $target_menu = $(this).find('ul:eq(0)');
            $target_menu.slideUp('normal');//隐藏
       
                                           }
                                           )
                                        }
                                           );

return this;          }
                             
      })(jQuery);

在前端调用此插件eg：

$('.dropdown').multimenu(
{float:'left',method:'h',width:'200px'}//自己可以配置
)

 

--------------------------------------------------------------------

<ul class="dropdown " >

<li class="parent"><a href="#">For Facilities</a>
                <ul class="sub_menu">
                     <li><a href="#">Artificial Turf</a></li>
                     <li class="parent">
                        <a href="#">Batting Cages</a>
                        <ul>
                            <li><a href="#">Indoor</a></li>
                            <li><a href="#">Outdoor</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Benches &amp; Bleachers</a></li>
                     <li><a href="#">Communication Devices</a></li>
                     <li><a href="#">Dugouts</a></li>
                     <li><a href="#">Fencing &amp; Windscreen</a></li>
                     <li><a href="#">Floor Protectors</a></li>
                     <li><a href="#">Foul Poles</a></li>
                     <li><a href="#">Netting</a></li>
                     <li><a href="#">Outdoor Furniture &amp; Storage</a></li>
                     <li><a href="#">Outdoor Signs</a></li>
                     <li><a href="#">Padding</a></li>
                     <li><a href="#">Scoreboards</a></li>
                     <li><a href="#">Shade Structures</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>
            <li class="parent"><a href="#">Field Maintenance</a>
                <ul class="sub_menu">
                    <li><a href="#">All-in-One Team Cart</a></li>
                    <li><a href="#">Air &amp; Electrical Reels</a></li>
                     <li><a href="#">Field Drags</a></li>
                     <li class="parent">
                        <a href="#">Field Marking Equipment</a>
                        <ul>
                            <li><a href="#">Batter's Box Templates</a></li>
                            <li><a href="#">Dryline Markers</a></li>
                            <li><a href="#">Field Paint</a></li>
                            <li class="parent"><a href="#">Field Sprayers</a>
                            <ul><li><a href="#">这些事</a></li>
                            <li><a href="#">哪些人</a></li>
                            </ul>
                            </li>
                            <li><a href="#">Stencils</a></li>
                        </ul>
                     </li>
                     <li class="parent">
                        <a href="#">Field Tarps</a>
                        <ul>
                            <li><a href="#">Area Tarps</a></li>
                            <li><a href="#">Growth Covers / Protectors</a></li>
                            <li><a href="#">Infield Tarps</a></li>
                            <li><a href="#">Tarp Accessories</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Hand Tools</a></li>
                     <li class="parent">
                        <a href="#">Irrigation, Hoses, Nozzles</a>
                        <ul>
                            <li><a href="#">Hoses &amp; Hose Reels</a></li>
                            <li><a href="#">Irrigation</a></li>
                            <li><a href="#">Nozzles</a></li>
                        </ul>
                     </li>
                     <li><a href="#">Layout &amp; Measurement Tools</a></li>
                     <li><a href="#">Moisture Removal</a></li>
                     <li><a href="#">Mound &amp; Home Plate Fortification</a></li>
                     <li><a href="#">Mowers &amp; Stripers</a></li>
                     <li><a href="#">Soil &amp; Enviornmental Management</a></li>
                     <li><a href="#">Soil Amendments</a></li>
                     <li><a href="#">Spreaders &amp; Sweepers</a></li>
                     <li><a href="#"> - VIEW ALL - </a></li>
                </ul>
            </li>

</ul>

 

此时插件能很好的工作，有一些不美观的地方自己可以调试~