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 ...
随机推荐
- Python基础:1.数据类型（空、布尔类型、整型、长整型、浮点型、字符串）
提示:python版本2.7,windows系统 Python提供的基本数据类型:空.布尔类型.整型.长整型.浮点型.字符串.列表.元组.字典.日期 1.空(None) None,是一个特殊的值,不能 ...
- Bootstrap--全局css样式之图片
好久没有更新博客了,在这里跟大家分享一下生活的小乐趣,作为程序员,整天对着电脑是很不爽的,加班也是常有的,所以连续工作对身体是很不爽的,而且随着年龄的增加,程序员身体状况会越来越差,还是建议大家要常去 ...
- RTTI和反射
JAVA 运行时识别对象和类的信息,主要有两种方式:一种是传统的RTTI,它假定我们在编译时已经知道了所有的类型:另一种是"反射"机制,它允许我们在运行时发现和使用类的信息. 参考 ...
- Logcat中报内存泄漏MemoryLeak的一次分析
有时候运行APP的时候Logcat中会报错,提示资源没有释放,Memory leak, 于是打开Android Studio在Android Monitor工具栏点开,有Logcat和Monitors ...
- SQL Server调优系列进阶篇 - 如何维护数据库索引
前言 上一篇我们研究了如何利用索引在数据库里面调优,简要的介绍了索引的原理,更重要的分析了如何选择索引以及索引的利弊项,有兴趣的可以点击查看. 本篇延续上一篇的内容,继续分析索引这块,侧重索引项的日常 ...
- DEVMODE 结构体
typedef struct _devicemode { TCHAR dmDeviceName[CCHDEVICENAME]; //打印机(显示设备)名称 WORD dmSpecVersion; WO ...
- oracle学习（1）
1.安装完oracle数据库后,远程第一次无法登陆,需要进入sys用户后,更改以此后才有效. 2.TNS去读取配置的时候,如果在环境变量中已经配置了 TNS_ADMIN 后,则直接从此目录下读取. 3 ...
- Mysql 创建联合索引注意事项
当一个表有多条索引可走时, Mysql 根据查询语句的成本来选择走哪条索引, 联合索引的话, 它往往计算的是第一个字段(最左边那个), 这样往往会走错索引. 如: 索引Index_1(Crea ...
- 【html】【7】基础布局初探
当了解了上面的文章有一定基础后,开始尝试初步基础布局,可能不美观,但是要开始有布局框架思想 基础代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- C# 多任务之 Task
Task 是什么 ? Task 是一个类, 它表示一个操作不返回一个值,通常以异步方式执行. Task 对象是一个的中心思想 基于任务的异步模式 首次引入.NET Framework 4 中. 继承层 ...