jQuery实现级联菜单效果(仿淘宝首页菜单动画)


Posted in Javascript onApril 10, 2014

相信初学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.整个效果的实现我们还要为子选项框绑定鼠标事件,目的就是为了不在我们移动到子选项卡中,突然消失。

要实现好看的效果就需要加一些图片和样式,不过原理是一样的哦

Javascript 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
alert和confirm功能介绍
May 21 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
理解Angular的providers给Http添加默认headers
Jul 04 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue的路由映射问题及解决方案
Oct 14 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
js获取视频时长代码
Apr 10 #Javascript
js转化毫秒为时间格式代码
Apr 10 #Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 #Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 #Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 #Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 #Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 #Javascript
You might like
打造计数器DIY三步曲(上)
2006/10/09 PHP
使用php重新实现PHP脚本引擎内置函数
2007/03/06 PHP
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
解决php 处理 form 表单提交多个 name 属性值相同的 input 标签问题
2017/05/11 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
房产销售经理职责
2013/12/20 职场文书
品牌推广策划方案
2014/05/28 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
2016年母亲节广告语
2016/01/28 职场文书