css文件内容：
* {
margin: 0px; padding: 0px;
}
h2 {
margin: 10px 0px; font-size: 14px; font-weight: bold;
}
p {
margin-bottom: 10px;
}
body {
text-align: center; font-family: "Lucida Grande", Verdana, Arial, Sans-Serif; font-size: 62.5%;
}
#container {
margin: 150px auto 0px; width: 400px; text-align: left;
}
#menubar ul.menus li {
list-style: none; margin-right: 1px; float: left;
}
#menubar ul.menus li a {
background: rgb(103, 172, 229); padding: 20px 30px; color: rgb(255, 255, 255); text-decoration: none; display: block;
}
#menubar ul.menus ul {
position: absolute;
}
#menubar ul.menus li.current-cat a {
background: rgb(84, 149, 205);
}
#menubar ul.menus li a:hover {
background: rgb(66, 129, 183);
}
#menubar ul.children {
margin: 0px; padding: 0px; display: none;
}
#menubar ul.children li {
margin: 0px; padding: 0px; float: none;
}
#menubar ul.children li a {
width: 100px;
}
jsp内容：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("path", path);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu Demo</title>
<link rel="stylesheet" href="${path}/style/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="${path }/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" >
jQuery(document).ready(function(){
// 找到所有菜单, 并添加显示和隐藏菜单事件
jQuery('#menus > li').each(function(){
jQuery(this).hover(
// 显示菜单
function(){
jQuery(this).find('ul:eq(0)').show();
},
// 隐藏菜单
function(){
jQuery(this).find('ul:eq(0)').hide();
}
);
});
});
</script>
</head>
<body>
<div id="container">
<!-- 分类菜单 START -->
<div id="menubar">
<ul id="menus" class="menus">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under .Net">.Net</a>
<ul class="children">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under ADO.NET">ADO.NET</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under ASP.NET">ASP.NET</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under C#">C#</a></li>
</ul>
</li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Java">Java</a>
<ul class="children">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under EJB">EJB</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Hibernate">Hibernate</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Java core">Java core</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under JSP">JSP</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Spring">Spring</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Struts">Struts</a></li>
</ul>
</li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under Web">Web</a>
<ul class="children">
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under (X)HTML">(X)HTML</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under ACSS">CSS</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under PHP">PHP</a></li>
<li class="cat-item cat-item"><a href="javascript:void(0);" title="View all posts filed under JavaScript">JavaScript</a></li>
</ul>
</li>
</ul>
</div>
<!-- 分类菜单 END -->
<div style="clear:both;"></div>
</div>
</body>
</html>
分享到：
相关推荐
"jQuery响应式导航菜单"是一个专为实现这一目的而设计的解决方案。这个项目使用了两个核心JavaScript库：jQuery 1.8.3和pgwmenu.min.js，它们共同创建了一种动态、适应性强的菜单系统，尤其适用于现代网页设计，特别...
下面我们将深入探讨如何使用jQuery实现这种效果。 1. **HTML结构**： 多级导航菜单通常由`<ul>`和`<li>`元素构建。每个`<li>`元素可以包含一个链接（`<a>`）和一个子菜单（另一个`<ul>`）。HTML代码应确保正确嵌套...
"jQuery特效导航菜单"是一个专为提升用户体验设计的解决方案，它利用JavaScript库jQuery的强大功能，实现动态、响应式的菜单切换效果，兼容各种主流浏览器，包括IE、Firefox、Chrome、Safari和Opera等。此特效不仅...
在介绍jQuery实现的动态伸缩导航菜单实例中，我们首先需要了解jQuery这个前端开发常用的JavaScript库。jQuery极大的简化了JavaScript编程，尤其在处理文档结构、事件处理、动画效果以及Ajax交互等方面提供了简便的...
本项目名为 "jquery下拉竖导航菜单代码"，旨在提供一个易于定制的下拉竖向导航菜单模板。 该代码的核心是利用 jQuery JavaScript 库来实现动态效果，如鼠标悬停时的显示和隐藏下拉菜单。jQuery 是一款广泛使用的 ...
- `js`：这是一个目录，可能包含实现导航菜单功能的JavaScript文件，比如定义事件处理和动画效果的函数。 - `css`：同样是一个目录，其中的CSS文件负责设置菜单的样式和布局。 - `images`：可能包含用于菜单的图标或...
本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航，当鼠标悬停在导航项上时，其子菜单会向左滑动展开。 首先，我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
本文将深入探讨如何利用jQuery实现酷炫的导航菜单特效。 首先，我们从基础开始。jQuery的核心理念是"Write Less, Do More"，这意味着用更少的代码实现更多的功能。在创建导航菜单时，我们可以利用jQuery的选择器来...
jQuery，一个流行的JavaScript库，提供了丰富的功能来简化DOM操作，动画效果以及事件处理，使得创建这种动态导航菜单变得简单。 首先，我们需要了解jQuery的基本概念。jQuery是由John Resig于2006年创建的，它通过...
"jQuery高亮滑动导航菜单"是一种使用JavaScript库jQuery实现的交互式菜单效果，旨在提升用户体验，使用户更容易追踪他们在网站中的位置。在这个项目中，我们将深入探讨如何使用jQuery创建这种动态、具有视觉吸引力的...
本文将深入探讨基于jQuery实现的下拉全屏导航菜单的知识点，包括其特点、原理、应用以及如何使用提供的源码。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在“jquery下拉...
在本文中，我们将深入探讨"jquery标签式导航菜单demo"这一主题，这涉及到前端开发中的重要组件——导航菜单，以及其使用JavaScript库jQuery实现的方法。导航菜单是网站和应用程序界面的关键部分，它帮助用户轻松地...
本文将深入探讨jQuery实现的后台左侧三级导航菜单的原理和应用。 首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。在构建后台导航菜单时，jQuery提供了丰富...
总的来说，这个项目提供了使用jQuery实现的导航菜单和高级搜索功能，为网站增加交互性和实用性。开发者可以学习如何整合HTML、CSS和JavaScript，利用jQuery的API来创建动态效果和处理用户输入。对于初学者，这是一个...
【fisheye-menu Jquery实现的导航菜单】是一种创新的网页交互设计，它利用了Jquery库的强大功能，为用户提供了独特的视觉体验。在网页设计中，导航菜单是至关重要的组成部分，它帮助用户轻松地浏览网站内容。Fisheye...
在网页设计中，导航菜单是用户与网站交互的关键元素，它帮助用户轻松浏览网站的不同部分。JQuery，一个流行的JavaScript库，提供了丰富的功能来创建动态、交互式的网页元素，其中包括滑动下拉导航菜单。本篇文章将...
本教程将探讨如何使用jQuery来实现这样的功能，同时结合CSS样式 lanrenzhijia.css，为用户提供一个美观且交互性强的下拉展示导航菜单。 首先，jQuery是一种轻量级的JavaScript库，它简化了JavaScript的DOM操作，...
jQuery 是一个流行的 JavaScript 库，提供了丰富的功能和简洁的语法，使得创建动态交互的浮动导航菜单变得非常简单。本文将深入探讨如何利用 jQuery 实现一个高效且响应式的浮动导航菜单。 首先，我们需要了解浮动...
在构建导航菜单时，jQuery的强大功能体现在其简单易用的API和丰富的插件生态。 1. **HTML结构**： - 一个有效的横向/纵向菜单通常由`<ul>`元素和`<li>`元素组成，分别代表菜单列表和菜单项。例如： ```html ...
jQuery作为JavaScript库，提供了丰富的API和方法，使得实现响应式导航菜单变得更加简单。 在“jQuery响应式导航菜单”的实现中，主要涉及到以下知识点： 1. **媒体查询**：媒体查询（Media Queries）是CSS3中的一...