今天在网上去查了一下导航菜单的制作。终于看见用jQuery实现导航菜单的代码，于是转载过来。首先给出二级导航菜单的实现
menu-jquery.html代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0073)http://www.neoease.com/tutorials/wordpress-menubar/wordpress-menubar-6.1/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312"></meta>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link type="text/css" href="style.css" type="text/css" rel="stylesheet"></link>
</head>
<body>
<div id="container">
<div id="menubar">
<ul class="menus" id="menus">
<LI class="current-cat"><A title=Home href="http://www.neoease.com/tutorials/wordpress-menubar/">All demos</A> </LI>
<li><a href="javascript:void(0);">Java</a>
<ul class="children">
<li><a>Java视频</a></li>
<LI ><A title="View all posts filed under C#"
href="javascript:void(0);">Java教材</A> </LI>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
style.css文件代码
/*****让UL下面的LI全部以一字型向左浮动*****/
#menubar UL.menus LI {
FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none
}
#menubar UL.menus LI A {
PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #67ace5; PADDING-BOTTOM: 5px; COLOR: #fff; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#menubar UL.menus UL {
POSITION: absolute
}
#menubar UL.menus LI.current-cat A {
BACKGROUND: #5495cd
}
#menubar UL.menus LI A:hover {
BACKGROUND: #4281b7
}
#menubar UL.children {
PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#menubar UL.children LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
#container {
MARGIN: 150px auto 0px; WIDTH: 400px; TEXT-ALIGN: left
}
#menubar UL.children LI A {
WIDTH: 100px
}
后面调用的jQuery.js和menu.js都以附件上传供下载
分享到：
相关推荐
jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单 jquery导航菜单鼠标悬停到导航条上滑动显示下拉菜单
jQuery导航菜单背景切换特效
通过上述步骤，我们可以创建一个功能完善的jQuery导航菜单。这个菜单不仅具有美观的外观，还具备良好的交互性。在实际项目中，可以根据需求进一步扩展，比如添加自定义的回调函数、过渡效果、以及与后台数据交互等...
今天我们将深入探讨三款优秀的jQuery导航菜单及其特点。 1. **Superfish** Superfish是一款广泛使用的jQuery导航菜单插件，它提供了许多高级特性，如下拉子菜单、悬停效果和无障碍访问。Superfish的亮点在于其良好...
jQuery 是一个流行的 JavaScript 库，提供了丰富的功能和简洁的语法，使得创建动态交互的浮动导航菜单变得非常简单。本文将深入探讨如何利用 jQuery 实现一个高效且响应式的浮动导航菜单。 首先，我们需要了解浮动...
**jQuery 导航菜单栏详解** 在Web开发中，导航菜单栏是页面布局的重要组成部分，它帮助用户快速浏览和访问网站的不同部分。jQuery作为一个强大的JavaScript库，提供了丰富的功能来简化和美化网页上的交互，包括创建...
`Jquery京东导航菜单`是一个基于jQuery实现的，模仿京东网站风格的导航菜单。这个菜单通常具有响应式设计，能够在不同设备上提供良好的用户体验，尤其在移动设备上，通过折叠或展开子菜单来适应屏幕大小。 jQuery是...
本文将深入探讨jQuery实现的后台左侧三级导航菜单的原理和应用。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。在构建后台导航菜单时，jQuery提供了丰富...
"jQuery特效导航菜单"是一个专为提升用户体验设计的解决方案，它利用JavaScript库jQuery的强大功能，实现动态、响应式的菜单切换效果，兼容各种主流浏览器，包括IE、Firefox、Chrome、Safari和Opera等。此特效不仅...
在本文中，我们将深入探讨"jquery标签式导航菜单demo"这一主题，这涉及到前端开发中的重要组件——导航菜单，以及其使用JavaScript库jQuery实现的方法。导航菜单是网站和应用程序界面的关键部分，它帮助用户轻松地...
**jQuery圆形导航菜单详解** 在Web开发中，创建吸引人的用户界面是至关重要的，而导航菜单作为用户与网站交互的主要入口，其设计和实现尤为重要。本文将深入探讨如何使用jQuery来构建一个美观且功能完善的圆形导航...
"jQuery响应式导航菜单"是一个专为实现这一目的而设计的解决方案。这个项目使用了两个核心JavaScript库：jQuery 1.8.3和pgwmenu.min.js，它们共同创建了一种动态、适应性强的菜单系统，尤其适用于现代网页设计，特别...
《jQuery横向导航菜单详解——打造美观实用的网页交互体验》 在网页设计中，导航菜单是用户与网站交互的关键元素，它能引导用户快速找到所需信息。尤其在现代网页设计中，横向导航菜单因其简洁、直观的特点而备受...
【标题】中的“Metro风格jQuery导航菜单”是指一种基于jQuery库设计的网页导航菜单，它采用了微软Windows 8操作系统引入的“Modern UI”或“Metro”设计语言的风格。这种风格以其简洁、清晰和模块化的界面设计而闻名...
横向滚动的jQuery导航菜单是一种常见的网页交互设计，它允许用户在水平方向上浏览长菜单，尤其是在网站顶部作为主导航使用时，能有效地节省空间并提升用户体验。这种菜单通常具有动态效果，例如当鼠标悬停在某一个...
本资源包含两款支持多级下拉的jQuery导航菜单代码，非常适合需要构建层级结构清晰、响应式的网站。 首先，我们来看第一款jQuery下拉导航菜单。这款菜单利用了jQuery的事件监听和DOM操作功能，实现了鼠标悬停时展开...
要实现“jQuery导航菜单动画渐入渐出特效”，我们需要遵循以下步骤： 1. **HTML结构**：构建基础的HTML导航菜单。通常，导航菜单由`<ul>`和`<li>`元素组成，每个`<li>`元素代表一个菜单项。例如： ```html <li>...
在“jQuery导航菜单切换插件”中，开发者可能已经封装了一些通用的功能，比如自动激活当前页面对应的菜单项，平滑滚动到相应内容等。使用插件的好处在于，它可以简化代码，减少重复工作，并且通常经过优化，性能较好...
jquery导航菜单插件制作常用的jquery二级下拉菜单子内容 jquery导航菜单插件制作常用的jquery二级下拉菜单子内容 jquery导航菜单插件制作常用的jquery二级下拉菜单子内容