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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
js获取表格的行数和列数的方法
Oct 23 Javascript
Vue.js搭建移动端购物车界面
Jun 28 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
JavaScript实现简单计算器
Mar 19 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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
How do I change MySQL timezone?
2008/03/26 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
php 解压rar文件及zip文件的方法
2014/05/05 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
简述php环境搭建与配置
2016/12/05 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
laravel model 两表联查示例
2019/10/24 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
关于JS中二维数组的声明方法
2016/09/24 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
python中的插值 scipy-interp的实现代码
2018/07/23 Python
django的ORM模型的实现原理
2019/03/04 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
如何使用python写截屏小工具
2020/09/29 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
大宝sod蜜广告词
2014/03/21 职场文书
网站创业计划书
2014/04/30 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
搞笑婚庆主持词
2015/06/29 职场文书