<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>jquery3-菜单效果</title>
<link type="text/css" rel="stylesheet" href="css/menu.css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul>
<li class="main">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="main">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
<br />
<br />
<ul>
<li class="hmain">
<a href="#">菜单项1</a>
<ul>
<li><a href="#">子菜单项11</a></li>
<li><a href="#">子菜单项12</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项2</a>
<ul>
<li><a href="#">子菜单项21</a></li>
<li><a href="#">子菜单项22</a></li>
</ul>
</li>
<li class="hmain">
<a href="#">菜单项3</a>
<ul>
<li><a href="#">子菜单项31</a></li>
<li><a href="#">子菜单项32</a></li>
</ul>
</li>
</ul>
</body>
</html>
js代码
$(function() {
$(".main > a").click(function() {
//找到主菜单项对应的子菜单项
//next:寻找当前节点指定名称的兄弟节点。
var ulNode = $(this).next("ul");
/* if (ulNode.css("display") == "none") {
ulNode.css("display", "block");
} else {
ulNode.css("display", "none");
}*/
//ulNode.show();
//ulNode.hide();
//自动判断，如果是合并的就打开，如果是打开的就合并
//ulNode.toggle();
//卷帘效果
//ulNode.slideDown();
//ulNode.slideUp();
//卷帘效果的自动判断
ulNode.slideToggle();
changeIcon($(this));
});
$(".hmain").hover(function() {
$(this).children("ul").slideDown();
changeIcon($(this).children("a"));
}, function() {
$(this).children("ul").slideUp();
changeIcon($(this).children("a"));
});
});
//指示图标的展打开和关闭
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("closed.gif") >= 0) {
mainNode.css("background-image", "url(image/open.gif)");
} else {
mainNode.css("background-image", "url(image/closed.gif)");
}
}
}
ul, li {
/*清楚ul li上默认的小圆点*/
list-style: none;
}
ul {
/*清除缩进*/
padding: 0;
margin: 0;
}
.main,.hmain{
background-image: url("../image/title.jpg");
background-repeat: repeat-x;
width: 120px;
}
li {
background-color: #EEEEEE;
}
a {
/*取消所有的下划线*/
text-decoration: none;
padding-left: 20px;
/*充满所在区域*/
display: block;
display: inline-block;
width: 100px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a,.hmain a{
color: white;
background-image: url("../image/closed.gif");
background-repeat: no-repeat;
background-position: 5px center;
}
.main li a, .hmain li a{
color: black;
background-image: none;
}
/*将所有子菜单隐藏*/
.main ul,.hmain ul{
display:none;
}
.hmain{
float:left;
margin-left:1px;
}
- 大小: 15 KB
分享到：
相关推荐
例如，通过使用`transition`属性，可以平滑地改变下拉菜单在显示和隐藏过程中的透明度或高度，从而实现“超滑”的效果。 二级下拉菜单的设计通常包含以下关键元素： 1. 主菜单项：一级菜单，当鼠标悬停或点击时...
`menu.js`是项目的JavaScript部分，它实现了下拉菜单的逻辑。在这个文件中，开发者可能定义了事件监听器，如`click`事件，当用户点击某个菜单项时，触发下拉菜单的展开或收起。另外，可能还包括了动画效果的实现，如...
使用jQuery实现多级下拉菜单能够使交互更加流畅，且代码相对简洁。以下是一个使用jQuery实现多级下拉菜单的实例，它理论上支持无限层级，并且具有简洁的文件结构。 首先，我们来看HTML结构。在示例代码中，`<ul>`...
本文将深入探讨如何利用jQuery实现一个可展开收缩的三级下拉菜单，并结合提供的代码进行详细解析。 首先，我们需要理解jQuery的基本用法。jQuery是一个JavaScript库，它简化了DOM操作、事件处理和动画制作。在本...
【jQuery仿百度百科右侧浮动菜单代码】是一种使用JavaScript库jQuery实现的网页交互功能，它旨在模仿百度百科中常见的右侧浮动菜单。这个菜单通常在页面滚动时保持固定在屏幕的一侧，提供一个方便的导航工具，用户...
3. **条件判断**：根据屏幕宽度或其他条件，决定是否显示为多级菜单或简单的单级下拉菜单。 4. **动画效果**：jQuery库支持丰富的动画效果，可以为菜单的展开和收起添加平滑的过渡。 在实际应用中，这个响应式多级...
过渡效果允许元素在两种状态之间平滑地变化，比如下拉菜单在展开和收起时的出现和消失速度。而动画则可以创建更复杂的时间序列行为，比如下拉子菜单的滑入滑出效果。 HTML5是现代网页开发的标准，它提供了许多新的...
现在，根据描述中的“20款下拉导航菜单DIV+CSS+JQ特效”，我们可以期待一系列不同风格和功能的下拉菜单实例： 1. **多级下拉**：一些菜单可能支持多级嵌套，用户可以逐级展开子菜单，适用于需要展示复杂层级关系的...
JS 特效 选项卡 菜单 下拉菜单 滚动特效 相册特效等等 网页特效 素材 web div+css 3级横向导航菜单 163网盘折叠菜单 CSS下拉菜单 div显示隐藏效果 Javascrip实现相册缩略图导航的两种效果 JS 图片轮换 封装中处理...
而`PopupWindow.rar` 可能是基础的PopupWindow实现，用于展示一般的下拉菜单或弹出窗口，是实现地域选择的基础。 在实际开发过程中，需要考虑性能优化，如异步加载城市数据，避免阻塞主线程；还要注意适配不同的...
例如，使用`.slideDown()`和`.slideUp()`方法实现下拉菜单的平滑展开和关闭，`.toggleClass()`用于切换类以改变元素的样式。 为了实现对IE8的兼容，开发者可能使用了jQuery的特定版本，因为某些较新的jQuery特性...
弹出菜单常用于下拉选项、操作提示等，jQuery提供了多种方式创建弹出菜单，如`dropdown`插件。通过CSS控制菜单的显示与隐藏，并结合Ajax加载菜单内容，可以实现动态更新。例如，当用户点击按钮时，通过Ajax请求获取...
5. **菜单与导航**：jQuery可以创建动态的下拉菜单、悬浮导航、多级导航等，使网站的导航更加直观易用。例如，`.toggle()`方法可用于实现点击后显示/隐藏子菜单。 6. **工具提示**：jQuery可以实现浮动提示信息，当...
3. **下拉菜单插件**：在导航栏中，下拉菜单能提供层次化的菜单结构，如`dropdown.js`。这些插件通常具有响应式设计，适应不同设备屏幕大小，并支持鼠标悬停和点击触发。 4. **模态框插件**：模态框(`modal.js`)...
9. **下拉菜单（Dropdown）**：创建可下拉的选择菜单，增强原生HTML `<select>` 元素的功能。 10. **按钮（Buttons）**：将链接或输入元素转换为有视觉反馈的按钮，支持图标、复选按钮和单选按钮样式。 11. **工具...
- 同时包含主按钮和下拉菜单的按钮。 15. **Form表单** - 包含输入字段和控件的表单。 16. **ValidateBox验证框** - 用于验证用户输入的表单元素。 17. **Combo组合** - 通用的组合框基类。 18. **ComboBox...
JavaScript是实现网页交互的核心语言，通过JS，你可以实现京东首页的一些动态效果，如导航栏的下拉菜单、轮播图、商品筛选功能等。初学者可以学习DOM操作，了解如何通过JavaScript改变HTML元素的属性、内容和样式，...
2. **创建表情面板**：在页面上动态创建一个表情选择面板，可以是下拉菜单、弹出窗口或者浮动侧边栏，里面包含各种emoji图标。 3. **绑定点击事件**：当用户点击表情图标时，将对应的emoji字符插入到输入框中。 4....
在网页设计中，jQuery可以用于添加动态效果，比如页面加载时的滑动、点击按钮后的弹窗、导航栏的下拉菜单等。你需要学习如何选择元素、添加事件监听器、操作DOM以及使用jQuery的动画API。 4. 实践应用：在大作业中...
5. **菜单（Menu）**：构建层级化的导航菜单，增强用户体验。 6. **按钮（Button）**：包括普通按钮、链接按钮、图标按钮等，用于触发操作。 7. **树形控件（Tree）**：展示层次结构的数据，常用于目录或组织结构...