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 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
javascript 原型继承介绍
Aug 30 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
Apr 10 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php中的静态变量的基本用法
2014/03/20 PHP
php实现设计模式中的单例模式详解
2014/10/11 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
php分页查询的简单实现代码
2017/03/14 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
Javascript Object.extend
2010/05/18 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
2012/03/14 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
大学毕业登记表自我鉴定
2013/10/09 职场文书
考博自荐信
2013/10/25 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers