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 相关文章推荐
JQuery表格内容过滤的实现方法
Jul 05 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
VUE安装使用教程详解
Jun 03 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
js+canvas实现五子棋小游戏
Aug 02 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php 读取文件乱码问题
2010/02/20 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
js中作用域的实例解析
2017/03/16 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
2017/05/18 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python守护进程用法实例分析
2015/06/04 Python
Python中文字符串截取问题
2015/06/15 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python登录系统界面实现详解
2019/06/25 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
经理秘书求职自荐信范文
2014/03/23 职场文书
音乐学专业求职信
2014/07/22 职场文书
公司感谢信范文
2015/01/22 职场文书
英语教师个人总结
2015/02/09 职场文书
员工试用期工作总结
2019/06/20 职场文书