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 ...
随机推荐
- [转].net连oracle的问题及方法折腾总结 连接字串
本文转自:http://www.th7.cn/Program/net/201305/138265.shtml 对oracle不算熟,对.net结合oracle开发项目也只做过一个.最近换了新电脑,装了 ...
- [转]Creating Unit Tests for ASP.NET MVC Applications (C#)
本文转自:http://www.asp.net/mvc/tutorials/older-versions/unit-testing/creating-unit-tests-for-asp-net-mv ...
- hadoop的相关资料链接
hadoop的资料整理博客 http://www.itpub.net/thread-1588509-1-1.html
- 关于事件监听机制的总结(Listener和Adapter)
记得以前看过事件监听机制背后也是有一种设计模式的.(设计模式的名字记不清了,只记得背后实现的数据结构是数组.) 附上事件监听机制的分析图: 一个事件源可以承载多个事件(只要这个事件源支持这个事件就可以 ...
- [原] Unity下的ElectroServer的连接
ES的版本是5.4.1,示例目录下code_examples\ConnectAndLoginManually是Unity的连接和登录代码. 除了host和port需要指定,在连接时需要指定连接方式,如 ...
- HTML5规范的本地存储
在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorag ...
- php入门实现留言板
首先由一个文本文档read.txt liulan.html <!doctype html> <html lang="en"> <head> &l ...
- 缓存(之一) 使用Apache Httpd实现http缓存
http://www.tuicool.com/articles/EFfeu2 HTTP性能的问题与方案 一个最终用户访问一个网页,从浏览器发出请求,到接受请求,时间大体上消耗在了以下几个部分: 建立t ...
- IIS6.0、IIS7中的站点、应用程序和虚拟目录详细介绍
这里说的不是如何解决路径重写或者如何配置的问题,而是阐述一下站点(site),应用程序(application)和虚拟目录 (virtual directory)概念与作用,已及这三个东西在IIS6与 ...
- JEditorPane中html文档中文乱码解决
Culturally dependent information in some documents is handled through a mechanism called character e ...