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 ...
随机推荐
- oracle学习总结1
1:解锁用户alter user 用户名 account unlock; 2:获取系统时间.随机数select sysdate, sys_guid() from dual; 3:起别名,使可读性更强, ...
- 哇！今天找到一个非常好用的自动补全插件-necomplete.vim
看别人说的什么xpcomplete,snipte,拿来都不会用,这个necomplete.vim还挺好用的,不用去按C-X,C-O进行补全,把关键字自动的列出来,调用的是用户自定义补全,^u^n^p的 ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- php入门实现留言板
首先由一个文本文档read.txt liulan.html <!doctype html> <html lang="en"> <head> &l ...
- 微信平台(一)--获取access_token
事前思路准备 说在前面:如果要获取access_token,那么你需要appid,appsecret;另外需要post请求连接https://api.weixin.qq.com/cgi-bin/tok ...
- JD（转载）
时间:2012-9-11 地点:川大 我只能说第一家公司,不是一般的火爆.不得不吐槽一下: 京东宣讲完全没有计划,只看到个下午两点半宣讲,结果跑过去,下午两点是宣讲管培的.在川大外的德克士呆了一下午. ...
- ios开发之UIView的frame、bounds跟center属性的区别(附图)
博文暂时想到什么写什么,不顺理成章,不顺章成篇. 先看几个概念 坐标点Poit:向右侧为X轴正方向的值x,原点下侧为Y轴正方向的值y 大小Size:由宽度width和高度height构成,表示一个矩形 ...
- [PR & ML 5] [Introduction] Decision Theory
- [Effective Java读书笔记] 第二章 创建和销毁对象(1~7)
我的技术博客经常被流氓网站恶意爬取转载.请移步原文:http://www.cnblogs.com/hamhog/p/3537576.html,享受整齐的排版.有效的链接.正确的代码缩进.更好的阅读体验 ...
- C++里的int 和string类型相互转换
C++不像Java和C#一样在进行数据类型转换时直接调用一些类方法就可以了,使用起来很简单. 一个很简单的例子就是string str=“D:\\”+1+“.txt”;这在Java或者C#里面是可以自 ...