首页 > 代码库 > jQuery滑动导航菜单
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="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> </ul> </li> <li class="first">新手引导 <ul class="sub"> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> </ul> </li> <li class="first">进阶资料 <ul class="sub"> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> </ul> </li> <li class="first">职业技能 <ul class="sub"> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> </ul> </li> <li class="first">装备道具 <ul class="sub"> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> <li><a href="http://www.mamicode.com/#">子菜单二</a> <ul> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> <li><a href="http://www.mamicode.com/#">三级菜单</a></li> </ul> </li> </ul> </li> <li class="first">任务指引 <ul class="sub"> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a></li> <li><a href="http://www.mamicode.com/#">子菜单二</a> </li> </ul> </li> </ul></div></body></html>
jQuery滑动导航菜单
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。