1、jsp 文件（Menu.jsp）
<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>横向纵向菜单</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript" src="scripts/jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".main > a").click(function(){
//找到主菜单对应的子菜单
var ulNode = $(this).next();
if ($(this).css("background-image").indexOf("collapsed.gif") >= 0) {
$(this).css("background-image","url('images/expanded.gif')");
} else {
$(this).css("background-image","url('images/collapsed.gif')");
}
//jQuery中的方法
ulNode.slideToggle(300);
});
$(".hmain").hover(function(){
$(this).children("ul").slideDown(100);
changeIcon($(this).children("a"));
},function(){
$(this).children("ul").slideUp(100);
changeIcon($(this).children("a"));
});
});
/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
if (mainNode){
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image","url('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
</script>
</head>
<body>
<ul>
<li class="main">
<a href="javascript:void(0)">菜单项1</a>
<ul>
<li><a href="javascript:void(0)">子菜单项11</a></li>
<li><a href="javascript:void(0)">子菜单项12</a></li>
</ul>
</li>
<li class="main">
<a href="javascript:void(0)">菜单项2</a>
<ul>
<li><a href="javascript:void(0)">子菜单项21</a></li>
<li><a href="javascript:void(0)">子菜单项22</a></li>
</ul>
</li>
<li class="main">
<a href="javascript:void(0)">菜单项3</a>
<ul>
<li><a href="javascript:void(0)">子菜单项31</a></li>
<li><a href="javascript:void(0)">子菜单项32</a></li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<br>
<ul>
<li class="hmain">
<a href="javascript:void(0)">菜单项1</a>
<ul>
<li><a href="javascript:void(0)">子菜单项11</a></li>
<li><a href="javascript:void(0)">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="javascript:void(0)">菜单项2</a>
<ul>
<li><a href="javascript:void(0)">子菜单项21</a></li>
<li><a href="javascript:void(0)">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="javascript:void(0)">菜单项3</a>
<ul>
<li><a href="javascript:void(0)">子菜单项31</a></li>
<li><a href="javascript:void(0)">子菜单项32</a></li>
</ul>
</li>
</ul>
</body>
</html>
2、css 文件（menu.css）
@CHARSET "UTF-8";
ul,li{
/*清除ul和li上默认的小圆点*/
list-style:none;
}
ul{
/*清除子菜单的缩进值*/
padding-left:0px;
margin-left:0px;
}
.main{
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:100px;
}
li{
background-color:#EEEEEE;
}
a{
/*取消所有的下划线*/
text-decoration:none;
color:white;
font-size:16px;
line-height:25px;
padding-left:20px;
/*设置该属性使得超链接充满整个li*/
display:block;
/*在IE6中要将超链接充满整个li时需要设置的属性
display:inline-block;*/
}
.main a{
/*添加小三角图片，同时设置其位置*/
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3px center;
}
.main li a{
color:black;
font-size:14px;
/*设置子菜单中没有图片背景*/
background-image:none;
}
.main ul{
/*隐藏子菜单*/
display:none;
}
.hmain{
float:left;/*让li显示在一行上*/
background-image:url(../images/title.gif);
background-repeat:repeat-x;
width:100px;
margin-right:1px;
}
.hmain a{
/*添加小三角图片，同时设置其位置*/
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3px center;
}
.hmain li a{
color:black;
font-size:14px;
/*设置子菜单中没有图片背景*/
background-image:none;
}
.hmain ul{
/*隐藏子菜单*/
display:none;
}
分享到：
相关推荐
5. **源代码分析**：在提供的“jquery横向纵向菜单”压缩包中，应该包含 HTML、CSS 和 JavaScript 文件。通过查看这些文件，你可以看到具体实现上述功能的代码示例。这将有助于你理解如何在实际项目中应用这些概念。...
通过以上步骤，你可以创建一个既美观又实用的JQuery横向纵向菜单。这样的菜单不仅提供了良好的视觉体验，还增强了用户的交互性。在实际应用中，你可以根据项目需求进行定制，如添加过渡效果、自定义动画速度或调整...
标题 "JQuery横向纵向动态菜单" 涉及到的是使用JavaScript、CSS和JQuery库创建交互式的网页菜单。这种菜单通常会在用户滚动或点击时，以横纵切换的方式显示子菜单项，提供丰富的用户体验。 JavaScript是网页开发中...
JQuery实战：横向纵向菜单 JQuery实战：横向纵向菜单
本教程将详细讲解如何使用JQuery创建横向和纵向菜单，让网站的导航更加直观且用户体验更佳。 首先，理解基本的HTML结构对于创建菜单至关重要。一个简单的横向菜单通常由`<ul>`（无序列表）和`<li>`（列表项）元素...
总之，jQuery横向纵向下拉菜单特效结合了HTML、CSS和JavaScript的力量，提供了直观且互动的用户体验。通过不断学习和实践，我们可以创建出更加复杂、个性化的菜单效果，满足各种网页设计需求。在探索这个领域时，...
提供的"JQuery实战第三讲：横向纵向菜单.avi"视频教程很可能会演示以上所述的概念和技巧，包括HTML结构、CSS样式以及JQuery脚本编写。观看此视频，可以帮助你更好地理解并实际操作这些技术。 总之，掌握JQuery创建...
在本文中，我们将深入探讨如何使用Jquery实现一个高效、美观的横向纵向菜单。这个实例展示了Jquery的强大功能，以及如何结合JavaScript（JS）来创建交互式的网页元素，提升用户体验。 首先，我们要理解Jquery是什么...
在这个"横向纵向菜单"的jQuery实例中，我们将学习如何利用jQuery的强大功能创建动态、响应式的菜单系统。 1. **基础结构**： - 首先，我们需要HTML结构来定义菜单的基础布局。横向菜单通常由`<ul>`和`<li>`元素...
本主题将深入探讨jQuery在创建可编辑表格、实现横向和纵向菜单、构建标签页、设计级联下拉框以及窗口管理方面的应用。 首先，让我们谈谈jQuery可编辑表格。在网页上展示数据时，有时需要用户能够直接在表格中进行...
### JQuery实战：横向纵向菜单知识点总结 #### 一、页面结构设计与布局 - **页面中的菜单项构建**：页面中的菜单项可以通过嵌套的`<ul>`和`<li>`来表示。最外层使用`<ul>`，每个主菜单放在一个`<li>`中。如果某个...
横向菜单通常沿水平方向展开，而纵向菜单则沿垂直方向展开。 在实际应用中，为了适应不同屏幕大小和设备，可能还需要考虑响应式设计。可以使用媒体查询（`media queries`）来根据浏览器窗口大小改变菜单的样式和...
基于jQuery的横向、纵向下拉菜单，支持五级，其实这已经够用了，横向和竖向都有了，方便大家的调用，效果如上示，jQuery加入后，菜单下拉更平滑了，也希望jQuery爱好者认真仔细参考代码，扩展出更强大的功能来。
【描述】：jQuery实现的无限下拉菜单允许用户在点击主菜单项后，无限次地展开子菜单，无论是横向还是纵向，都能提供流畅的导航体验。源代码包含了完整的实现逻辑，便于开发者学习和参考。 【标签】：jQuery、无限...
标题中的"基于jQuery的横向'纵向下拉菜单JS代码"是指一种使用JavaScript库jQuery实现的交互式导航菜单，它具备横向展示主菜单项，并在鼠标悬停时展开纵向子菜单的功能。这种菜单设计增强了用户体验，使得网站的导航...
本篇文章将详细介绍如何使用jQuery来实现一种动态的、既可纵向展开也可横向显示的菜单效果。 首先，我们来看HTML结构。在示例中，菜单由`<ul>`元素作为容器，一级菜单的每个项目由`<li>`元素表示，而二级菜单则嵌套...
在描述中提到，纵向卷帘菜单的最外层通常由`<ul>`和`<li>`标签构成，而横向卷帘菜单则可能包含`<ul>`、`<li>`以及`<div>`元素。这是因为`<ul>`和`<li>`是HTML中用于表示无序列表的标签，它们天然适合用来构建层级化...
jQuery多级纵向与横向菜单,缓冲动画效果，这是来自国外网站的一个特效菜单，理论上可以实现无限级，请根据自己的需求修改吧，接下来烈火下载会推出更多精品脚本资源(jQuery)源代码，欢迎关注。 特效代码截图如下...
本文主要探讨了如何使用jQuery来实现一种特殊的纵向导航菜单效果。这个效果的特点是当鼠标悬停在一级菜单项上时，相应的二级菜单会以适当的位置显示出来，确保不超出浏览器的可视区域。 首先，我们需要理解jQuery的...