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 ...
随机推荐
- Elasticsearch 搜索不到数据问题（_mapping 设置）
需求 由于 kibana3 中,不支持直接在请求的 url 中设置搜索的 type (是不是我不知道???). 为了支持特定 type 的搜索,所以我设置了个下每个 panel 的查询语句,让它增加一 ...
- Centos 7中 vim 中文乱码
参考:http://www.myexception.cn/operating-system/1534005.html 一. sudo vim /etc/vimrc 在文件中加入如下几行: s ...
- linux 中的vim的配置文件的位置
/etc下面也有一个vimrc:这个文件对所有用户都有效 在用户家目录(/home/用户名:或/root/)下面有一个.viminfo,只针对特定的用户有效
- CentOS下安装福昕PDF软件
官方下载地址:http://www.foxitsoftware.cn/downloads/ tar -jxvf foxreader.tar.bz2问题:下载官方包以后解压,双击不能打开,也没有任何提示 ...
- Javascript中函数调用和this的关系
例子先行: var myObject={ foo:"bar", func:function(){ var self=this; console.log("outerfun ...
- 一步一步创建一个简单的Package(1)
创建Package之前首先我们理解需求: 数据源是一组历史货币数据包含在平面文件SampleCurrencyData.txt中,源数据中有四列. 下面是SampleCurrencyData.txt文件 ...
- 解决64位win7系统IIS7[ODBC 驱动程序管理器]未发现数据源名称并且未指定默认驱动程序
从网上下载了一个asp系统,数据库是Access类型的,运行环境为 64位Windows 7系统,IIS7,运行系统后,报如下错误: Microsoft OLE DB Provider for ODB ...
- flexbox布局模式-- 浅谈
简介 Flexbox,一种CSS3的布局模式,也叫做弹性盒子模型,用来为盒装模型提供最大的灵活性.今天主要从以下几个方面简单谈谈flex. 1 版本更迭 2 flex容器 3 flex项目 4 fle ...
- 改善EF代码的方法（下）
本节,我们将介绍一些改善EF代码的方法,包括编译查询.存储模型视图以及冲突处理等内容. > CompiledQuery 提供对查询的编译和缓存以供重新使用.当相同的查询需要执行很多遍的时候,那么 ...
- Unable to make the session state request to the session state server处理方法
Server Error in '/' Application. Unable to make the session state request to the session state serve ...