教程集 > jQuery > jquery 教程 > 正文 jquery下拉菜单实现代码(折叠菜单修改)

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

发布时间：2016-01-01 编辑：jiaochengji.com

本文介绍了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下拉菜单-www.jbxue.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; 

}

您可能感兴趣的文章：
导航菜单-横竖结合的折叠下拉导航菜单效果
 jquery下拉菜单实现代码(折叠菜单修改)
jQuery菜单插件 Smooth Navigational Menu
Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
导航菜单-三级折叠竖向下拉导航菜单效果
 jQuery可折叠菜单 Accordion Menu script
js超漂亮折叠下拉菜单
 jquery animate()函数实现菜单折叠效果
 js 下拉折叠菜单代码
 JQuery实现绚丽的横向下拉菜单

关键词： 级联菜单 下拉菜单 　

上一篇：联动下拉菜单代码(jQuery与JSON实现) 下一篇：iframe中使用jquery查找功能

[关闭]

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

最近更新

浏览排行