您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jQuery实现级联菜单效果
作者：佚名 责任编辑：admin 更新时间：2022-06-22
今天我们就带大家体会一下级联菜单的显示，只是实现了简单的效果，不过大都原理是一样的
相信初学HTM+DIV+CSSl的同学们肯定也想做出淘宝网首页的菜单动画吧。今天我们就带大家体会一下级联菜单的显示。小编我只是实现了简单地效果，不过总体来说原理是一样的哦，那么先让大家看看效果图吧。 那么要实现这个效果我们当然要使用到的是jQuery,那么我就开始讲解怎么做的了，先上html和css的代码 代码如下: <!DOCTYPE html> <html> <head> <title>menu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../css/menu.css"> <script type="text/javascript" src="../js/jquery-1.10.2.js"></script> <script type="text/javascript" src="../js/menu.js"></script> </head> <body> <ul> <li class="menu"> <div class="title"> <span>电脑数码类产品</span> </div> <ul class="content"> <li class="optn"><a href="#">笔记本</a> <ul class="tip"> <li><a href="#">笔记本1</a></li> <li><a href="#">笔记本1</a></li> <li><a href="#">笔记本1</a></li> <li><a href="#">笔记本1</a></li> </ul> </li> <li class="optn"><a href="#">移动硬盘</a> <ul class="tip"> <li><a href="#">移动硬盘1</a></li> <li><a href="#">移动硬盘1</a></li> <li><a href="#">移动硬盘1</a></li> <li><a href="#">移动硬盘1</a></li> </ul> </li> <li class="optn"><a href="#">电脑软件</a> <ul class="tip"> <li><a href="#">电脑软件1</a></li> <li><a href="#">电脑软件1</a></li> <li><a href="#">电脑软件1</a></li> <li><a href="#">电脑软件1</a></li> </ul> </li> <li class="optn"><a href="#">数码产品</a> <ul class="tip"> <li><a href="#">数码产品1</a></li> <li><a href="#">数码产品1</a></li> <li><a href="#">数码产品1</a></li> <li><a href="#">数码产品1</a></li> </ul> </li> </ul> </li> </ul> </body> </html> menu.css 代码如下: @CHARSET "UTF-8"; *{ margin: 0px; padding: 0px; } ul,li{ list-style-type: none; } .menu{ width: 190px; border: 1px red solid; background-color: #fffdd2; } .optn{ width: 190px; line-height: 28px; border-top: 1px red dashed; } .content{ padding-top:10px; clear: left; } a{ text-decoration: none; color: #666; padding: 10px; } .optnFocus{ background-color: #fff; font-weight: bold; } div{ padding: 10px; } .tip{ width: 190px; border: 2px red solid; position: absolute; background-color: #fff; display: none; } .tip li{ line-height: 23px; } 接下来就是主要的jquery代码:menu.js 代码如下: $(function(){ var curY;//获取所选想的TOP var curH;//获取所选的Height var curW;//获取所选的width var objL;//获取当前对象 //自定义函数用于获取当前位置 function setInitValue(obj){ curY=obj.offset().top; curH=obj.height(); curW=obj.width(); } //设置当前所选项的鼠标滑动事件 $(".optn").mouseover(function(){ objL=$(this);//获取当前对象 setInitValue(objL); var allY=curY-curH +"px"; objL.addClass("optnFocus"); //获取气元素下的下一个ul $(".tip",this).show().css({"top":allY,"left":curW});; }); $(".optn").mouseout(function(){ $(this).removeClass("optnFocus"); $(".tip",this).hide(); }); //为了防止移到子菜单时子菜单不见，我们也要为子菜单设置鼠标事件 $(".tip").mouseover(function(){ $(this).show(); objL=$(this).prev("li"); setInitValue(objL); objL.addClass("optnFocus"); }); $(".tip").mouseout(function(){ $(this).hide(); $(this).prev("li").removeClass("optnFocus"); }); }); 注意要点： 1.由于我们用的是较高版本的jquery文件库，所以有些方法是不支持的，例如获取下一个元素的第一个子元素next(erp)，在10.1中是不支持的，所以我换了一种方法$(chiled,select),表示在select的范围进行元素的选择 2.整个效果的实现我们还要为子选项框绑定鼠标事件，目的就是为了不在我们移动到子选项卡中，突然消失。 要实现好看的效果就需要加一些图片和样式，不过原理是一样的哦- 上一个程序编程： jquery序列化表单去除指定元素示例代码
- 下一个程序编程： javascript正则匹配汉字、数字、字母、下划线
