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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
JS重要知识点小结
Nov 06 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
localstorage实现带过期时间的缓存功能
Jun 28 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
单位速度在实战中的运用
2020/03/04 星际争霸
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
php 中英文语言转换类代码
2011/08/11 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
Laravel5.1框架路由分组用法实例分析
2020/01/04 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
ng-repeat指令在迭代对象时的去重方法
2018/10/02 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
python字符串切割:str.split()与re.split()的对比分析
2019/07/16 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
运动会演讲稿50字
2014/08/25 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
学校青年志愿者活动总结
2015/05/06 职场文书
工作态度怎么写
2015/06/25 职场文书
结婚十年感言
2015/07/31 职场文书
机械生产实习心得体会
2016/01/22 职场文书
调解协议书范本
2016/03/21 职场文书
高中班主任寄语
2019/06/21 职场文书