JQuery(纵向横向菜单)小结
说明：此次小结是为了展示JQuery实现菜单的效果。
文件清单：
menu.jsp ----菜单JSP页面
jquery.js ----JQuery源文件JS
menu.js ----菜单使用的JS
style.css ----菜单样式文件
menu.jsp源文件，如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery[菜单效果]</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<ul>
<li class="mainMenu">
<a href="#">机构管理</a>
<ul>
<li><a href="#">添加机构</a></li>
<li><a href="#">修改机构</a></li>
<li><a href="#">查询机构</a></li>
</ul>
</li>
<li class="mainMenu">
<a href="#">部门管理</a>
<ul>
<li><a href="#">添加部门</a></li>
<li><a href="#">修改部门</a></li>
<li><a href="#">查询部门</a></li>
</ul>
</li>
<li class="mainMenu">
<a href="#">员工管理</a>
<ul>
<li><a href="#">添加员工</a></li>
<li><a href="#">修改员工</a></li>
<li><a href="#">查询员工</a></li>
</ul>
</li>
</ul>
<br/>
<hr/>
<br/>
<ul>
<li class="crossMenu">
<a href="#">机构管理</a>
<ul>
<li><a href="#">添加机构</a></li>
<li><a href="#">修改机构</a></li>
<li><a href="#">查询机构</a></li>
</ul>
</li>
<li class="crossMenu">
<a href="#">部门管理</a>
<ul>
<li><a href="#">添加部门</a></li>
<li><a href="#">修改部门</a></li>
<li><a href="#">查询部门</a></li>
</ul>
</li>
<li class="crossMenu">
<a href="#">员工管理</a>
<ul>
<li><a href="#">添加员工</a></li>
<li><a href="#">修改员工</a></li>
<li><a href="#">查询员工</a></li>
</ul>
</li>
</ul>
</body>
</html>
style.css样式源文件，如下：
/*菜单样式：2010-11-24*/
UL,LI{
/*去掉小圆点*/
list-style: none;
}
UL{
/*清除子菜单缩进*/
padding: 0;
/*但IE浏览器不能缩进*/
margin: 0;
}
/*主菜单样式*/
.mainMenu,.crossMenu{
/*字体大小*/
font-size: 12px;
/*添加背景图片*/
background-image: url(../../resources/images/title.gif);
/*背景图横向重复*/
background-repeat: repeat-x;
/*主菜单宽度*/
width: 70px;
}
/*子菜单样式*/
LI{
/*背景色*/
background-color: #EEEEEE;
}
A{
/*取消链接的下划线*/
text-decoration: none;
/*子菜单缩进*/
padding-left: 15px;
/*让连接充满区域，及菜单边缘也可以点击
* 问题：如果值为block,IE会出现问题，
* 不能填充，且子菜单会变样，因此我们
* 用 inline解决，但是不能解决填充，
* 因此加上宽度(70 - 15)
*/
display: block;
display: inline;
width: 70px;
/*在所有的链接加3个像素的上边距和下边距*/
padding-top: 3px;
padding-bottom: 3px;
}
.mainMenu A,.crossMenu A{
/*主菜单链接为白色*/
color: white;
/*链接背景图片*/
background-image: url(../../resources/images/collapsed.gif);
/*背景图不重复*/
background-repeat: no-repeat;
/*背景箭头的位置*/
background-position: 2px center;
}
.mainMenu LI A,.crossMenu LI A{
/*子菜单链接文字为黑色*/
color: black;
/*去掉子菜单背景箭头*/
background-image: none;
}
/*主菜单下的UL全部隐藏*/
.mainMenu UL,.crossMenu UL{
display: none;
}
/*横向菜单*/
.crossMenu{
/*横向排列*/
float: left;
/*字体大小*/
font-size: 12px;
}
menu.js源文件，如下：
$(
function()
{
/**
* 如果使用.mainMenu a选择器，会
* 出现点击子菜单也会触发click事件
* 解决方法：使用JQuery的特有方式
* .mainMenu > a
* */
$('.mainMenu > a').click(
function()
{
//找到主菜单项的子菜单项
var childMenu = $(this).next('ul');
/*常规方法*/
/*
if('none' == childMenu.css('display'))
{
childMenu.css('display','block');
}
else
{
childMenu.css('display','none');
}
*/
/*使用JQuery的方法
* 数值为毫秒
* 文字：slow/normal,fast*/
//childMenu.show(100);
//childMenu.show('normal');
//childMenu.hide(100);
//省去if else 判断
//childMenu.toggle('normal');
//卷帘效果，也支持参数
//childMenu.slideDown();
//childMenu.slideUp();
//省去if else 判断
childMenu.slideToggle();
changeIcon($(this));
}
);
//处理横向菜单
/*
$('.crossMenu > a').hover(
function()
{
$(this).next('ul').slideDown();
},
function()
{//但是鼠标移到子菜单，会有bug,子菜单消失
//$(this).next('ul').slideUp();
//首先得到子菜单
var childMenu = $(this).next('ul');
//解决方法，延时处理(300ms)
var timeOutID = setTimeout(
function()
{
$(this).next('ul').slideUp();
},300
);
childMenu.hover(
function()
{
//删除父菜单的延时
clearTimeout(timeOutID);
},
function()
{//但此时还是有问题，走了很多弯路
$(this).slideUp();
}
);
}
);
*/
$('.crossMenu').hover(
//自己判断
// function()
// {
// $(this).children('ul').slideDown();
// },
// function()
// {
// $(this).children('ul').slideUp();
// }
//卷帘效果
function()
{
$(this).children('ul').slideToggle();
changeIcon($(this).children('a'));
}
);
}
);
/*修改主菜单的指示图标*/
function changeIcon(mainNode)
{
if(mainNode)
{
if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0)
{
mainNode.css('background-image', 'url(resources/images/expanded.gif)');
}
else
{
mainNode.css('background-image', 'url(resources/images/collapsed.gif)');
}
}
}
小结：
A部分
① 页面中的菜单可以通过嵌套ul和li来表示；
② 菜单最外层为ul，一层每个主菜单放在一个li中，如果有子菜单，在这个主菜单的li中建立新的ul，再依次嵌套即可构件多层的菜单；
③ 浏览器中ul和li元素默认情况下文字前都有圆点标识符，li元素会有缩进.Opera浏览器比较特殊，li的标志符号和其他浏览器不同；
④ list-style属性值为none时，可以清除ul和li前的小圆点
⑤ 清除子菜单的缩进值，需要padding和margin都为0，其中IE只有margin也为0时才可以清除缩进值；
⑥ 可以使用background-image来指定一个元素的背景图，如果背景图比元素的实际大小要小，那么背景图会自动在横向和纵向上重复显示，直到填满整个区域；
⑦ 可以使用background-repeat来控制背景图的重复填充方式；
⑧ 如果一个元素上同时定义了背景图和背景色，那么有背景图的地方是不会显示背景色的；
⑨ text-decoration属性值为none时，可以取消链接A文字下方的下划线；
⑩ background-position可以控制背景图的位置，属性值既可以用数值，也可以使用center,left,top这些值来控制横向和纵向的位置。这个属性的两个值，第一个对应横向，第二个对应纵向；
B部分
① background-image的值为none表示没有背景图；
② background-repeat的值为no-repeat时，背景图不会在所在的区域中重复显示；
③ display的值为none可以用来隐藏元素；
④ .mainMenu a 和 .mainMenu > a 的不同之处，前者选择使用了.mainMenu的这个class的元素内部所有的a节点，后者只选择.mainMenu的子节点中的a节点；
⑤ show(),hide()方法可以用于显示或隐藏元素，没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值，或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。
⑥ toggle方法更为强大，可以省去判断元素是否显示、隐藏，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show()和hide()相同；
⑦ slideDown、slideUp可以实现向下或向上卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()，hide()不同；
⑧ slideToggle和toggle达到类似的效果；
⑨ DOCTYPE对于JQuery的动画效果是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果；
⑩ Float的值为left，可以使原本各自位于一行的元素全部在一行中向左浮动；
C部分
① 可以给多个选择器定义同样的样式，选择器之间用，分割。同样对于JQuery的$（）方法，也可以传入多个选择器。
相关推荐
通过以上步骤，你可以创建一个既美观又实用的JQuery横向纵向菜单。这样的菜单不仅提供了良好的视觉体验，还增强了用户的交互性。在实际应用中，你可以根据项目需求进行定制，如添加过渡效果、自定义动画速度或调整...
本教程将围绕“jQuery 横向纵向菜单”这一主题，详细介绍如何使用 jQuery 实现这种功能，并提供源代码供参考。 首先，让我们了解什么是横向和纵向菜单。横向菜单通常位于网页顶部，选项水平排列，而纵向菜单则常...
本教程将详细讲解如何使用JQuery创建横向和纵向菜单，让网站的导航更加直观且用户体验更佳。 首先，理解基本的HTML结构对于创建菜单至关重要。一个简单的横向菜单通常由`<ul>`（无序列表）和`<li>`（列表项）元素...
标题 "JQuery横向纵向动态菜单" 涉及到的是使用JavaScript、CSS和JQuery库创建交互式的网页菜单。这种菜单通常会在用户滚动或点击时，以横纵切换的方式显示子菜单项，提供丰富的用户体验。 JavaScript是网页开发中...
本篇文章将深入探讨如何使用jQuery实现一个下拉横向导航菜单，并且讲解如何通过二级下拉菜单直接调用另一个HTML页面内容。 首先，我们需要理解jQuery的基本语法和选择器。jQuery通过"$"符号来初始化和操作DOM元素。...
JQuery实战：横向纵向菜单 JQuery实战：横向纵向菜单
基于jQuery的横向、纵向下拉菜单，支持五级，其实这已经够用了，横向和竖向都有了，方便大家的调用，效果如上示，jQuery加入后，菜单下拉更平滑了，也希望jQuery爱好者认真仔细参考代码，扩展出更强大的功能来。
《jQuery横向导航菜单详解——打造美观实用的网页交互体验》 在网页设计中，导航菜单是用户与网站交互的关键元素，它能引导用户快速找到所需信息。尤其在现代网页设计中，横向导航菜单因其简洁、直观的特点而备受...
本篇文章将详细讲解如何利用jQuery实现一个纵向菜单，以及涉及的相关知识点。 首先，理解纵向菜单的基本概念。纵向菜单通常是指在网页左侧或右侧垂直排列的导航链接列表，这种布局方式有助于组织网站内容，方便用户...
本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航，当鼠标悬停在导航项上时，其子菜单会向左滑动展开。 首先，我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
而“jQuery横向动态滑动导航菜单插件”则为开发者提供了一种高效且吸引人的解决方案，使得网页的导航功能更加直观和互动。这个插件特别适用于那些希望提升用户体验，增加网站视觉吸引力的设计师和开发者。 jQuery是...
本主题关注的是一个基于 jQuery 的纵向滑动菜单，它提供了二级或三级的联动效果，适用于构建层次分明的导航结构。 一、jQuery 纵向滑动菜单的基本概念 纵向滑动菜单是一种常见的网页导航组件，通常垂直布局，用户...
【jQuery 横向二级菜单】是网页设计中常见的交互元素，主要用于网站导航，提供清晰且高效的用户界面。在本文中，我们将深入探讨如何利用jQuery和CSS创建一个动态的、响应式的横向二级菜单。 首先，我们需要理解...
本文将深入探讨如何利用jQuery实现一个功能丰富的横向纵向下拉菜单特效。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。对于创建动态和交互式的网页，...
标题中的"基于jQuery的横向'纵向下拉菜单JS代码"是指一种使用JavaScript库jQuery实现的交互式导航菜单，它具备横向展示主菜单项，并在鼠标悬停时展开纵向子菜单的功能。这种菜单设计增强了用户体验，使得网站的导航...
在这个“Jquery横向菜单”的实例中，我们将会探讨如何利用jQuery实现一个动态、灵活的水平导航菜单，该菜单具有弹出子菜单功能，并且能够方便地进行扩展，以适应不同数量的子项。 首先，我们需要在HTML结构中创建...
提供的"JQuery实战第三讲：横向纵向菜单.avi"视频教程很可能会演示以上所述的概念和技巧，包括HTML结构、CSS样式以及JQuery脚本编写。观看此视频，可以帮助你更好地理解并实际操作这些技术。 总之，掌握JQuery创建...
在本文中，我们将深入探讨如何使用Jquery实现一个高效、美观的横向纵向菜单。这个实例展示了Jquery的强大功能，以及如何结合JavaScript（JS）来创建交互式的网页元素，提升用户体验。 首先，我们要理解Jquery是什么...
3. 响应式设计：为了使菜单在不同设备上都有良好的用户体验，可以考虑使用媒体查询和jQuery的`.width()`方法来实现响应式布局，比如在小屏幕上改为垂直菜单。 总结，通过jQuery，我们可以轻松创建出具有横向滑动...
本篇文章将详细介绍如何使用jQuery来实现一种动态的、既可纵向展开也可横向显示的菜单效果。 首先，我们来看HTML结构。在示例中，菜单由`<ul>`元素作为容器，一级菜单的每个项目由`<li>`元素表示，而二级菜单则嵌套...