以下是 巧克力jQuery横向二级滑动导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为巧克力jQuery横向二级滑动导航菜单，属于站长常用代码" />
<title>巧克力jQuery横向二级滑动导航菜单</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript" src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="menu">
<ul id="nav">
<li class="mainlevel"><span class="note">Chocolate Bar</span></li>
<li class="mainlevel" id="mainlevel_01"><a href="#">browsers</a>
<ul class="sub_nav_01">
<span class="Triangle_con"></span>
<li><a href="#">firefox</a></li>
<li><a href="#">chrome</a></li>
<li><a href="#">opera</a></li>
<li><a href="#">IE</a></li>
<li><a href="#">Netscape</a></li>
</ul>
</li>
<li class="mainlevel" id="mainlevel_02"><a href="#">html</a>
<ul class="sub_nav_01">
<span class="Triangle_con"></span>
<li><a href="#">html</a></li>
<li><a href="#">xhtml</a></li>
<li><a href="#">html5</a></li>
<li><a href="#">css</a></li>
<li><a href="#">TCP/IP</a></li>
</ul>
</li>
<li class="mainlevel"><a href="#">xml</a>
<ul class="sub_nav_01">
<span class="Triangle_con"></span>
<li><a href="#">XSL</a></li>
<li><a href="#">XSLT</a></li>
<li><a href="#">XSL-FO</a></li>
<li><a href="#">XPath</a></li>
<li><a href="#">XQuery</a></li>
<li><a href="#">XLink</a></li>
<li><a href="#">XPointer</a></li>
<li><a href="#">DTD</a></li>
<li><a href="#">Schema</a></li>
<li><a href="#">XForms</a></li>
</ul>
</li>
<li class="mainlevel"><a href="#">browsers<em></em>scripting</a><!--input an em tag as a space,IE is gread need-->
<ul class="sub_nav_01">
<span class="Triangle_con"></span>
<li><a href="#">JavaScript</a></li>
<li><a href="#">DHTML</a></li>
<li><a href="#">VBScript</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">E4X</a></li>
<li><a href="#">WMLScript</a></li>
</ul>
</li>
<li class="mainlevel"><a href="#">server<em></em>scripting</a>
<ul class="sub_nav_01">
<span class="Triangle_con"></span>
<li><a href="#">SQL</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">ADO</a></li>
<li><a href="#">PHP</a></li>
</ul>
</li>
<li class="mainlevel"><a href="#">dot<em></em>net</a></li>
<li class="mainlevel"><a href="#">multimedia</a>
<ul class="sub_nav_01">
<span class="Triangle_con"></span>
<li><a href="#">Media</a></li>
<li><a href="#">SMIL</a></li>
<li><a href="#" target="_blank">LEO</a></li>
</ul>
</li>
</ul>
</div>
<!-- 代码 结束 -->
</body>
</html>
JS代码(lrtk.js):
//menu$(document).ready(function(){
$('li.mainlevel').mousemove(function(){
$(this).find('ul').slideDown("1000");
//you can give it a speed}
);
$('li.mainlevel').mouseleave(function(){
$(this).find('ul').slideUp("fast");
}
);
}
);
CSS代码(lrtk.css):
@charset "utf-8";/* CSS Document */
html,body,ul,li{padding:0;margin:0;}
body{font:12px/normal Verdana,Arial,Helvetica,sans-serif;}
ul,li{list-style-type:none;text-transform:capitalize;}
.clear{clear:both;*display:inline;/*IE only*/
}
/*menu*/
#menu{margin:100px auto;display:block;width:1000px;height:34px;}
#nav{display:block;}
#nav .mainlevel{float:left;background:#3f240e;text-align:center;display:block;}
#nav .mainlevel a{color:#fff;text-decoration:none;line-height:34px;height:34px;text-align:center;padding:0 20px;display:block;_width:48px;}
#nav .mainlevel a:hover{color:#3f240e;text-decoration:none;background:#678900 url(../images/slide-pannel_14.png) 0 0 repeat-x;}
#nav .mainlevel ul{position:absolute;display:none;*width:2000px;/*IE is great need,width>=li.length*/
}
#nav .mainlevel li{float:left;background:#3f240e;}
#nav .mainlevel li a{padding:0 12px;line-height:24px;height:24px;display:block;_padding-bottom:6px;/*IE6 only*/
}
#nav .mainlevel li a:hover{color:#3f240e;text-decoration:none;background:#678900 url(../images/slide-pannel_14.png) 0 0 repeat-x;}
#nav li a em/*input an em tag as a space*/
{padding:0 3px;}
.note{color:#3f240e;border-right:1px solid #fff;background:#678900 url(../images/slide-pannel_14.png) 0 0 repeat-x;display:block;line-height:34px;padding:0 3em;}
.Triangle_con{height:9px;background:url(../images/bird.png) 36px 0 no-repeat;display:block;_margin-bottom:-6px;/*IE6 only*/
}
.log{margin:100px auto;width:1000px;text-transform:capitalize;line-height:200%;}
分享到QQ
分享到微博
微信扫一扫
