jquery下拉菜单实现代码(折叠菜单修改)

发布时间:2019-08-08编辑:脚本学堂
本文介绍了jquery实现下拉菜单的一例代码,由原来的折叠菜单代码修改而来,有需要的朋友参考下。

用以前发过的折叠菜单源码修改了下,做成了下拉菜单

1,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> 
    <title>jquery/xialacaidan/ target=_blank class=infotextkey>jquery下拉菜单-www.jb200.com</title> 
    <link href="css/index.css" rel="stylesheet" type="text/css" /> 
    <script src="js/jquery-1.7.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> 

2,js脚本部分
 

复制代码 代码示例:
$(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"}); 
    }); 
}); 

3,css代码部分,渲染jquery下拉菜单效果。
 

复制代码 代码示例:
*,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; 
}