<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$("li.x_1").mousemove(function(){
$(this).children().slideDown(180);
});
$("li.x_1").mouseleave(function(){
$(this).children().slideUp(180);
});
$(".x_1 ul li").hover(function(){
$(this).children().slideDown(180);
},function(){
$(this).find("ul").slideUp(180);
});
$(".j2").hover(function(){
$(this).find("ul").slideDown(180);
},function(){
$(this).find("ul").slideUp(180);
});
});
</script>
<style type="text/css">
.firt{background-color:bule;}
.x_1{float:left;list-style-type:none;line-height:30px; height:30px;width:140px;background-color:blue;margin-left:2px;
text-align:center;}
.x_1:hover{background-color:red;}
.x_1 ul{display:none;position:absolute;margin-left:-40px;}
.x_1 ul li{background-color:blue;list-style-type:none;width:140px;}
.x_1 ul li:hover{background-color:red;}
a{color:#ffffff;underline:none;}
.i2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }
.j2 ul{display:none;position:absolute;margin-left:102px;margin-top:-30px; }
</style>
</head>
<body>
<ul id="firt" class="firt">
<li class="x_1">
第一个主菜单
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul>
</li>
<li class="x_1">
第二个主菜单
<ul>
<li class="i2" >
<a href="#">子菜单ttt</a>
<ul class="i3" >
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单2</a></li>
<li class="j2">
<a href="#">子菜单2</a>
<ul class="j3" >
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul>
</li>
<li class="x_1">
第三个主菜单
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单1</a></li>
</ul>
</li>
</ul>
</body>
</html>
我也是超级新手，昨天开始学的jquery 我觉得我们新手学的时候就需要一些想我这样简单的列子才看的懂！！
分享到：
相关推荐
在网页开发中，jQuery是一个非常重要的JavaScript库，它极大地简化了...总之，"jquery各种菜单插件源码与示例"提供了一套全面的菜单解决方案，无论你是新手还是老手，都能从中受益，提升你的jQuery技能和网页设计能力。
1. **多级菜单支持**：jGlideMenu能够处理复杂的菜单结构，支持无限级别的子菜单，使得网站的层级清晰，易于浏览。 2. **滚动感应**：当用户滚动页面时，菜单会根据页面的位置自动调整其可见性，保持与内容的相关性...
《jQuery MegaMenu 超酷...无论是新手还是经验丰富的开发者，都能从中找到适合自己的解决方案，为网站增添一份独特的魅力。在实际项目中，根据具体需求进行适当的调整和优化，你就能打造出令人眼前一亮的超酷菜单了。
在网页设计中，多级菜单是一种常见的交互元素，它能够帮助用户更有效地浏览和导航复杂的网站结构。本教程将深入探讨如何使用CSS和JavaScript来实现一个功能完善的多级菜单，这对初学者尤其有帮助。 首先，我们需要...
综上所述，这个项目提供的代码是构建多级菜单树形结构的一种解决方案，它以简洁明了的设计思路，配合jQuery库，使得在网页应用中创建和管理复杂层次结构变得轻松。无论是新手还是经验丰富的开发者，都能从中受益，...
这个插件不仅适用于传统的横向菜单，还支持垂直菜单和多级下拉菜单，极大地丰富了网页的视觉表现力。 首先，我们要了解jGlideMenu的基本使用方法。在项目中引入jQuery库和jGlideMenu的JavaScript文件后，可以通过...
5. 可能还需要添加一些额外的逻辑，如防止冒泡、处理多级子菜单等。 这个压缩包中的代码提供了实践学习的好材料，对于初学者来说，可以通过分析这些文件理解jQuery实现下拉菜单的机制。对于有经验的开发者，可以...
首先，"jQuery纵向树形结构图菜单代码"是一个基于jQuery库实现的插件，它允许开发者创建可展开和折叠的多级菜单，以垂直方式呈现，方便用户浏览和操作。jQuery的易用性和广泛支持使得这个插件在网页开发中具有很高的...
"js的各种样式的菜单"这个主题涵盖了JavaScript实现的各种菜单样式，这些样式可能包括下拉菜单、多级菜单、滑动菜单、折叠菜单等，都是为了提升用户体验而设计的。 首先，JavaScript是Web开发中的动态语言，它允许...
2. **多级菜单**：该插件可以处理多层次的子菜单，用户可以通过点击父级菜单项来展开或折叠子菜单，实现深度导航。 3. **动画效果**：tuxedo-menu.js提供了多种动画效果供选择，如滑动、淡入淡出等，这些效果在菜单...
- **菜单(Menu)**：创建可折叠的多级菜单，适用于导航和操作选项。 - **按钮(Button)**：将链接或文本转换为各种样式的按钮。 - **进度条(Progressbar)**：展示任务的进度状态。 - **效果(Effects)**：包括淡入淡出...
10. **Superfish**：这是一个流行的jQuery下拉菜单插件，支持多级菜单和各种动画效果。 11. **Animated Drop Down Menu with jQuery**：为下拉菜单添加动画效果，提升用户体验。 12. **jQuery Menu: Dropdown, ...
菜单和工具栏组件可帮助组织和展示功能选项，1.3.3版本中的菜单支持多级结构，工具栏则可灵活配置按钮和分隔符，方便定制应用的控制面板。 8. **主题支持** jQuery EasyUI 提供了多种预设主题，可以快速改变应用...
- **菜单(Menu)**：创建可扩展的多级菜单，适用于网站导航。 - **按钮(Button)**：将链接、文本或图像转换为具有各种样式和功能的按钮。 2. **主题和定制** - **ThemeRoller**：jQuery UI提供在线工具，允许...
8. **菜单(Menu)**：创建多级下拉菜单，用于导航或操作选项。 9. **按钮(Button)**：将链接、输入或文本转换为可点击的按钮，支持多种样式和状态。 10. **工具提示(Tooltip)**：显示额外信息的浮动框，可以在鼠标...
6. **菜单（Menu）**：Menu组件可以创建多级下拉菜单，常用于网站导航和操作项的展示，支持动态加载和异步更新。 7. **分页（Pagination）**：当数据量大时，分页组件可以将数据分页显示，提高用户体验。它提供了...
2. **多级菜单**：支持无限级别的子菜单，使得复杂的导航结构也能清晰呈现。 3. **动画效果**：提供平滑的展开和收起动画，增强了用户的交互体验。 4. **自定义配置**：允许开发者通过配置项调整菜单样式、动画速度...
3. **菜单（menu）**：菜单组件允许开发者创建多级下拉菜单，用于实现复杂的导航结构。它可以与按钮、链接等元素结合使用，提供直观的操作选项。 4. **表单（form）**：EasyUI的表单组件提供了各种表单元素，如...
5. **菜单（Menu）**：提供多级下拉菜单，可用于构建导航系统，支持动态加载和异步更新。 6. **按钮（Button）**：包括普通按钮、链接按钮、图标按钮等，支持自定义事件和样式。 7. **对话框（Dialog）**：类似于...
1. **菜单（Menu）**：jQuery UI 提供了可定制的下拉菜单，支持多级结构，适用于创建导航栏或者上下文菜单。它支持键盘导航，符合无障碍标准，确保所有用户都能方便地使用。 2. **对话框（Dialog）**：对话框组件...