由于需要 用以前发过的折叠菜单源码改了一下 做成了下拉菜单 感觉还不错 留着以后使用
<!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下拉菜单插件详解** 在Web开发中，下拉菜单是一种常见的交互元素，用于在有限的空间内展示丰富的选项。jQuery，一个轻量级、高性能的JavaScript库，提供了丰富的API和插件来帮助开发者创建功能强大的下拉...
在这个主题中，“25个免费的HTML5 CSS3 jQuery下拉菜单”是一个集合，它包含了多种使用这些技术实现的下拉菜单模板，供开发者在构建网站时选用。 HTML5作为最新的超文本标记语言标准，提供了更强大的语义化元素，如...
"jQuery下拉菜单"是网页交互设计中常见的一个功能，广泛应用于导航栏或者选项选择，为用户提供方便的交互体验。 首先，我们需要了解下拉菜单的基本构成。下拉菜单通常由一个触发元素（如按钮或链接）和隐藏的选项...
在网页设计中，jQuery下拉菜单分类搜索框是一种常见的交互元素，它提供了高效且用户友好的导航和搜索体验。这个项目可能包含以下组件和知识点： 1. **jQuery库**: jQuery是一个广泛使用的JavaScript库，简化了DOM...
网页模板和jQuery下拉菜单是构建现代网页设计的重要组成部分，特别是在提升用户体验方面。网页模板提供了一种快速构建网站布局的方法，而jQuery下拉菜单则在导航栏中为用户提供直观且高效的交互体验。 首先，让我们...
通过阅读和分析这些代码，你可以深入理解jQuery下拉菜单的工作原理，并将其应用到自己的项目中。 总之，使用jQuery创建下拉菜单是一个高效且直观的过程。通过理解基本的HTML结构、引入jQuery库以及编写适当的事件...
jQuery 是一个广泛使用的JavaScript库，它为开发者提供了丰富的API和插件，使得创建动态、响应式的下拉菜单变得更加简单。本教程将深入探讨如何使用jQuery实现下拉菜单特效。 首先，理解基本的HTML结构是至关重要的...
"jQuery下拉菜单表单美化插件"，如"Image DropDown"，正是为了提升这种体验而诞生的工具。这款插件是基于JavaScript库jQuery开发的，其主要目标是将传统的HTML `<select>` 下拉菜单转化为更具吸引力、更易用的交互...
实际项目中，jQuery下拉菜单可能需要根据具体需求进行调整，例如多级嵌套、异步加载内容、动态创建菜单等。开发者可以参考各种在线示例和开源插件，如SlickNav、Superfish等，来学习和借鉴不同的实现方式。 总之，...
"可控制下拉方向的jQuery下拉菜单"是一个专门解决这一需求的解决方案，它提供了更灵活的设计选择，允许开发者根据页面布局调整下拉菜单的显示方向，无论是向上展开还是向下展开。这种功能尤其在空间有限或者页面布局...
本项目“jquery下拉菜单导航效果”是利用jQuery库实现的一种仿腾讯云的滑动下拉导航菜单，旨在提供高效且用户体验良好的菜单导航方案。 首先，jQuery是一个轻量级的JavaScript库，它的API简洁易用，极大地简化了...
本文将详细解析"jQuery下拉菜单选中搜索框插件代码"的相关知识点，帮助开发者理解并应用这个插件。 首先，我们要明白下拉菜单（Dropdown Menu）在网页设计中的作用。它通常用于将多个选项或子菜单隐藏在主菜单项之...
### 知识点一：jQuery下拉菜单的基本概念 #### 定义 jQuery下拉菜单是一种常见的用户界面组件，用于提供额外的导航选项或功能设置。这种菜单在鼠标悬停或点击时出现，并且通常包含一系列子菜单项。 #### 功能 - **...
压缩包中的"jquery-drill-down-menu-plugin"可能是一个已经封装好的jQuery下拉菜单插件，使用它可以快速构建动画下拉菜单，减少自定义代码的工作量。通常，这样的插件会提供一些配置选项，如动画速度、方向、触发...
《实用的jQuery下拉菜单详解》 在网页设计中，下拉菜单是一种常见的交互元素，它可以帮助用户在有限的空间内浏览和访问大量的导航选项。jQuery作为JavaScript的一个强大库，为创建动态、响应式的下拉菜单提供了丰富...
本资源集合包含了多种具有不同特效的jQuery下拉菜单实现，可以满足开发者对美观和功能的需求。 jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。使用...
**jQuery下拉菜单插件详解** 在Web开发中，下拉菜单是一种常见的交互元素，用于在有限的空间内展示丰富的选项。jQuery，一个流行的JavaScript库，提供了丰富的插件来实现各种功能，包括创建复杂的下拉菜单。本文将...