自己写的一个基于jquery多级菜单插件
admin
2024-04-04 00:35:21
0

此插件是基于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("|")
                                        }
                                        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'}//自己可以配置
)

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

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

相关内容

热门资讯

【MySQL】锁 锁 文章目录锁全局锁表级锁表锁元数据锁(MDL)意向锁AUTO-INC锁...
【内网安全】 隧道搭建穿透上线... 文章目录内网穿透-Ngrok-入门-上线1、服务端配置:2、客户端连接服务端ÿ...
GCN的几种模型复现笔记 引言 本篇笔记紧接上文,主要是上一篇看写了快2w字,再去接入代码感觉有点...
数据分页展示逻辑 import java.util.Arrays;import java.util.List;impo...
Redis为什么选择单线程?R... 目录专栏导读一、Redis版本迭代二、Redis4.0之前为什么一直采用单线程?三、R...
【已解决】ERROR: Cou... 正确指令: pip install pyyaml
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
Lock 接口解读 前置知识点Synchronized synchronized 是 Java 中的关键字,...
Win7 专业版安装中文包、汉... 参考资料:http://www.metsky.com/archives/350.htm...
3 ROS1通讯编程提高(1) 3 ROS1通讯编程提高3.1 使用VS Code编译ROS13.1.1 VS Code的安装和配置...
大模型未来趋势 大模型是人工智能领域的重要发展趋势之一,未来有着广阔的应用前景和发展空间。以下是大模型未来的趋势和展...
python实战应用讲解-【n... 目录 如何在Python中计算残余的平方和 方法1:使用其Base公式 方法2:使用statsmod...
学习u-boot 需要了解的m... 一、常用函数 1. origin 函数 origin 函数的返回值就是变量来源。使用格式如下...
常用python爬虫库介绍与简... 通用 urllib -网络库(stdlib)。 requests -网络库。 grab – 网络库&...
药品批准文号查询|药融云-中国... 药品批文是国家食品药品监督管理局(NMPA)对药品的审评和批准的证明文件...
【2023-03-22】SRS... 【2023-03-22】SRS推流搭配FFmpeg实现目标检测 说明: 外侧测试使用SRS播放器测...
有限元三角形单元的等效节点力 文章目录前言一、重新复习一下有限元三角形单元的理论1、三角形单元的形函数(Nÿ...
初级算法-哈希表 主要记录算法和数据结构学习笔记,新的一年更上一层楼! 初级算法-哈希表...
进程间通信【Linux】 1. 进程间通信 1.1 什么是进程间通信 在 Linux 系统中,进程间通信...
【Docker】P3 Dock... Docker数据卷、宿主机与挂载数据卷的概念及作用挂载宿主机配置数据卷挂载操作示例一个容器挂载多个目...