jQuery滑动导航菜单
js：
$(function(){
$("ul.sub").parent().append("<span></span>");
$("ul.sub ul").parent().append("<em></em>");
$('#nav ul').closest('li').hover(function(){
$(this).find("span").addClass("arrow");
$(this).find("em").removeClass("arrow");
$(this).children("ul").stop(true,true).slideDown('fast').show();
$("#nav ul>li").hover(function(){$(this).addClass("hover")},
function(){$(this).removeClass("hover")});
},function(){
$(this).children("ul").stop(true,true).hide();
$(this).find("span").removeClass("arrow");
$(this).find("em").addClass("arrow");
})
})
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="author" content="Web Layout:LiQiang.Gu;" />
<meta name="description" content="前端思考 web前端 前端制作 artskin www.artcss.com" />
<meta name="Keywords" content="前端思考 web前端 前端制作 artskin www.artcss.com" />
<title>下拉导航菜单</title>
<script type="text/javascript" src="http://www.artcss.com/js/jq_1.4.js"></script>
<link rel="stylesheet" rev="stylesheet" href="http://www.artcss.com/test/menu/menu.css" type="text/css" />
<script type="text/javascript">
$(function(){
$("ul.sub").parent().append("<span></span>");
$("ul.sub ul").parent().append("<em></em>");
$('#nav ul').closest('li').hover(function(){
$(this).find("span").addClass("arrow");
$(this).find("em").removeClass("arrow");
$(this).children("ul").stop(true,true).slideDown('fast').show();
$("#nav ul>li").hover(function(){$(this).addClass("hover")},function(){$(this).removeClass("hover")});
},function(){
$(this).children("ul").stop(true,true).hide();
$(this).find("span").removeClass("arrow");
$(this).find("em").addClass("arrow");
})
});
</script>
</head>
<body>
<div class="nav">
<ul id="nav">
<li class="first">游戏介绍
<ul class="sub">
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</li>
<li class="first">新手引导
<ul class="sub">
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</li>
<li class="first">进阶资料
<ul class="sub">
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a></li>
</ul>
</li>
<li class="first">职业技能
<ul class="sub">
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li class="first">装备道具
<ul class="sub">
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
<li><a href="#">子菜单二</a>
<ul>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
<li><a href="#">三级菜单</a></li>
</ul>
</li>
</ul>
</li>
<li class="first">任务指引
<ul class="sub">
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a></li>
<li><a href="#">子菜单二</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
jQuery滑动导航菜单的更多相关文章
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
- 仿腾讯QQ竖直滑动导航菜单
菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <he ...
- jQuery弹性滑动导航菜单实现思路及代码
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta na ...
- 使用 jQuery 和 CSS3 制作滑动导航菜单
这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示 ...
- jquery 滑块导航菜单
带滑块的导航菜单,鼠标悬浮时,滑块会移动至鼠标位置,离开时,滑块会回到原来的位置,点击菜单之后滑块会停留在被点击菜单位置,等待下一次的鼠标悬浮事件或者点击事件,效果图: 图片效果不行,直接上代码: & ...
- JQuery 实现导航菜单的高亮显示
需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的 ...
- jquery 树形导航菜单无限级
转自:http://www.jb51.net/article/71615.htm 侵删<!DOCTYPE html> <html lang="en"> &l ...
- JQ滑动导航菜单的实现
前言:不多说直接看效果!!! 这样的菜单我们在一般的网站上见到的也比较多,有比较好的用户体验! 原理:这个很重要,任何的特效只要原理搞明白了,实现起来都是很容易的!这个特效的原理很简单,菜单的样式 ...
- jquery水平导航菜单展示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 关于XML的Schema文件讲解
1 Schema概述 1.1 什么是Schema l Schema是新的XML文档约束:DTD出现的比较早. l Schema要比DTD强大很多: l Schema本身也是XML文档,但Sche ...
- LC-检索
line void LC(tree T,float cost) { //为找一个答案结点检索T if(T是答案结点) {输出T:return:} E=T: //E-结点 将活结点表初始化为空: ) { ...
- [MSDN]使用 REST 处理文件夹和文件
msdn: http://msdn.microsoft.com/zh-cn/library/dn292553.aspx 了解如何使用 SharePoint 2013 REST 界面对文件夹和文件执行基 ...
- override和new的区别【摘】
override 1. override是派生类用来重写基类中方法的: 2. override不能重写非虚方法和静态方法: 3. override只能重写用virtual.abstract.overr ...
- windows下go开发环境部署 （sublime+gosublime+geocode）
1.下载git.go和sublime免安装版 go下载地址:http://pan.baidu.com/s/1hq1mrDM#path=%252Fgo%252F1.5.2sublime下载地址:http ...
- union 和 union all 的区别
Union因为要进行重复值扫描,所以效率低.如果合并没有刻意要删除重复行,那么就使用Union All 两个要联合的SQL语句 字段个数必须一样,而且字段类型要“相容”(一致): 如果我们需要将两个 ...
- linux process 相关命令
1.显示指定用户信息:ps -u root 2.显示所有进程信息,连同命令行:ps -ef 3. ps 与grep 常用组合用法,查找特定进程:ps -ef|grep ssh 4. 把所有进程显示出来 ...
- ERROR ITMS-90049错误解决
检查一下项目有集成友盟,shareSDK这种第三方包,里面有个腾讯bundle,包含了一个Info.plist. 去掉,就可以了.类似有其他第三方的bundle,可能也会出现这个问题. 原因估计是Ap ...
- IOS 应用程序启动加载过程（从点击图标到界面显示）
今天帮同事解决问题的时候发现,程序BUG是由加载过程引起的.所以当局部代码没有问题,但是程序一运行却总不是我们想要结果的时候,我们应该想想是不是因为我们忽略了试图加载过程的原因.下面我们用一个例子来简 ...
- eNSP
L2交换机 sysvlan 200q interface Vlanif 200ip address 192.168.0.1 24dis thisq interface Ethernet 0/0/1po ...