由于需要 用以前发过的折叠菜单源码改了一下 做成了下拉菜单 感觉还不错 留着以后使用
<!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>
<title>首页</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="head">
<div id="headLink">
<div class="menu">
<p class="menu_head">首页</p>
</div>
<div class="menu">
<p class="menu_head">主菜单...</p>
<div class="menu_body">
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
</div>
</div>
<div class="menu">
<p class="menu_head">主菜单...</p>
<div class="menu_body">
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
</div>
</div>
<div class="menu">
<p class="menu_head">主菜单...</p>
<div class="menu_body">
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
</div>
</div>
<div class="menu">
<p class="menu_head">主菜单...</p>
<div class="menu_body">
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
<a href="#">子菜单...</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function(){
$(".menu_head").click(function() {
$(this).parent().find(".menu_body").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(".menu_body").slideUp('slow');
});
}).hover(function() {
$(this).css({color:"#F4AE34"});
}, function(){
$(this).css({color:"#000"});
});
});
*,html{
margin:0px;
padding:0px;
}
body
{
text-align:center;
font-size:12px;
font-family:宋体,Times New Roman;
}
#container{
position:relative;
margin:0px auto 0px auto;
width:1002px;
text-align:left;
}
/*头部*/
/*头部导航*/
#headLink
{
position:absolute;
left:305px;
top:42px;
}
#headLink .menu
{
width:80px;
text-align:center;
float:left;
}
.menu_head {
padding: 1px;
cursor: pointer;
background:url(../images/menu_head.jpg) no-repeat;
font-weight:bold;
}
.menu_body {
display:none;
}
.menu_body a
{
padding:5px 0px;
display:block;
color:#535353;
text-align:center;
background-color:#eee;
text-decoration:none;
}
.menu_body a:hover {
color:#7fb2f4;
background-color:#dfdfdf;
}
分享到：
相关推荐
JQuery下拉菜单插件跟firebug IE版！ 喜欢的下载吧
jquery 下拉菜单特效 不错的 需要的朋友请下载使用
25 个免费的 HTML5 CSS3 jQuery 下拉菜单
jQuery下拉菜单分类搜索框代码JQuery drop-down menu category search box code
下拉菜单-JQUERY下拉菜单-JQUERY下拉菜单-JQUERY
网页模板，jquery下拉菜单网页模板，jquery下拉菜单网页模板，jquery下拉菜单
jquery下拉菜单,简单的下拉菜单。基于jquery写的一个简单的下拉菜单效果，希望对大家有用
jQuery下拉菜单选中搜索框插件代码jQuery下拉菜单选中搜索框插件代码
jquery特效
手风琴菜单效果，导航菜单,下拉菜单,手风琴菜单,JS下拉菜单,jQuery下拉菜单,导航下拉菜单特效
Jquery下拉菜单Jquery下拉菜单
简单jquery下拉菜单流畅版
可控制下拉方向的jQuery下拉菜单，非常实用，可设置导航菜单显示二级栏目的方向，可设置上拉和下拉。
美观实用简约的jQuery下拉菜单 美观实用简约的jQuery下拉菜单
这是一款功能相当强大的jQuery下拉菜单插件，搜索下拉框选择菜单代码，支持下拉，分页，键盘操作，鼠标右键查看等功能。
jQuery 下拉菜单集合, 有各种特效下拉菜单