您的位置：首页 > Web前端 > JQuery

jquery导航插件制作二级下拉菜单列表1

2013-06-07 23:33 676 查看

<!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=utf-8" />

<title>jquery导航插件制作二级下拉菜单列表|jsfoot 网页特效</title>

<meta name="keywords" content="jquery导航插件制作二级下拉菜单列表" />

<meta name="description" content="jquery特效,js特效,flash特效,div+css教程,html5教程" />

</head>

<body>



<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>

<script type="text/javascript">

(function(a){

a.fn.hoverClass=function(b){

var a=this;

a.each(function(c){

a.eq(c).hover(function(){

$(this).addClass(b)

},function(){

$(this).removeClass(b)

})

});

return a

};

})(jQuery);

$(function(){

$("#navbox").hoverClass("current");

});

</script>

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

a{color:#333;text-decoration:none;}

a:hover{color:#3366cc;text-decoration:underline;}

body{font:12px/180% "宋体";}

/* menu */

.menu{height:26px;width:110px;margin:20px auto;background:#fff;position:relative;}

.menu a{display:block;height:24px;line-height:24px;padding:0 0 0 10px;border:solid 1px #ddd;}

.menu a.tit{background:url(images/arrow.gif) no-repeat;background-position:94px 9px;}

#navbox.current a.tit{background-position:94px -15px;color:#3366cc;font-weight:800;border-bottom:solid 1px #fff;position:relative;z-index:9;}

.menu .subnav{display:none;background:#fff;position:absolute;top:25px;left:0px;width:140px;border-style:solid;border-color:#ddd;border-width:1px;}

#navbox.current .subnav{display:block;}

.menu .subnav a{border:none;}

.menu .subnav a:hover{background:#eee;border-left:solid 1px #fff;border-right:solid 1px #fff;font-weight:800;}

</style>

<div id="navbox" class="menu">

<a class="tit" href="#">jquery特效</a>

<ul class="subnav">

<li><a href="#">jquery图片特效</a></li>

<li><a href="#">jquery导航菜单</a></li>

<li><a href="#">jquery选项卡特效</a></li>

<li><a href="#">jquery文字特效</a></li>

<li><a href="#">jquery表单特效</a></li>

<li><a href="#">jquery表格特效</a></li>

</ul>

</div>



</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航