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 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
Apr 07 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
JavaScript函数柯里化
Nov 07 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
python文件比较示例分享
2014/01/10 Python
python链接Oracle数据库的方法
2015/06/28 Python
解决python 输出是省略号的问题
2018/04/19 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
Python单元测试与测试用例简析
2019/11/09 Python
Python Selenium参数配置方法解析
2020/01/19 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
学习党课思想汇报
2013/12/29 职场文书
眼镜促销方案
2014/03/15 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
个人工作能力自我评价
2015/03/05 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
考试后的感想
2015/08/07 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL
pycharm无法安装cv2模块问题
2022/05/20 Python