<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery导航菜单二级菜单slide滑动渐隐显示</title> <meta name="description" content="jquery导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录。jQuery下载" /></head>
<body>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:visited{color:#5e5e5e; text-decoration:none;} a:hover{color:#333;text-decoration:underline;} body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;} /* navbox */ .navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(images/headerbg.png) no-repeat;} .navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;} .nav{width:960px;margin:0 auto;} .nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;} .nav li.last{background:none;} .nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;} .nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;} .nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;} .nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;} .nav li.selected .submenu{display:block;} .nav li .submenu{display:none;position:absolute;top:39px;left:6px;} .nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;} .nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;} .nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;} .nav li .submenu li.last{border:none;} .nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;} .nav li .submenu li a:hover{background:#ddd;font-weight:800;} </style><script type="text/javascript" src=">
<script type="text/javascript"> function dropMenu(obj){ $(obj).each(function(){ var theSpan = $(this); var theMenu = theSpan.find(".submenu"); var tarHeight = theMenu.height(); theMenu.css({height:0,opacity:0}); theSpan.hover( function(){ $(this).addClass("selected"); theMenu.stop().show().animate({height:tarHeight,opacity:1},400); }, function(){ $(this).removeClass("selected"); theMenu.stop().animate({height:0,opacity:0},400,function(){ $(this).css({display:"none"}); }); } ); }); }$(document).ready(function(){
dropMenu(".drop-menu-effect");});
</script> <div class="navbox"> <div class="nav"> <ul class="clearfix"> <li><a class="selected" target="_blank" href=">网站首页</span></a></li> <li class="drop-menu-effect"> <a target="_blank" href="代码</span></a> <ul class="submenu"> <li><a href="图片特效</a></li> <li><a href="导航菜单</a></li> <li><a href="选项卡特效</a></li> <li><a href="文字特效</a></li> </ul> </li> <li class="drop-menu-effect"> <a target="_blank" href="图片特效</span></a> <ul class="submenu"> <li><a href="图片切换</a></li> <li><a href="幻灯片</a></li> <li><a href="图片滚动</a></li> <li><a href="图片放大镜</a></li> <li><a href="广告</a></li> <li><a href="更多特效</a></li> </ul> </li> <li class="drop-menu-effect"> <a target="_blank" href="导航菜单</span></a> <ul class="submenu"> <li><a href="动画菜单</a></li> <li><a href="树形菜单</a></li> <li><a href="下拉菜单</a></li> <li><a href="右键菜单</a></li> <li><a href="更多特效</a></li> </ul> </li> <li class="drop-menu-effect"> <a target="_blank" href="选项卡特效</span></a> <ul class="submenu"> <li><a href="选项卡切换</a></li> <li><a href="滑动选项卡</a></li> <li><a href="更多特效</a></li> </ul> </li> <li class="drop-menu-effect"> <a target="_blank" href="文字特效</span></a> <ul class="submenu"> <li><a href="文字滚动</a></li> <li><a href="文字闪烁</a></li> <li><a href="文字切换</a></li> <li><a href="文字数量</a></li> <li><a href="文字改变</a></li> <li><a href="更多特效</a></li> </ul> </li> </ul> </div> </div></body>
</html>