<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(function(){
$("li:has(ul)").hover(function(){
$(this).children().show();
},function(){
$(this).children().hide();
});
});
</script>
</head>
<style media="screen" type="text/css">
html, body, div, span,iframe, h1, h2, h3, h4, h5, h6, p, a, img, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
list-style:none;
}
html {
overflow-y:scroll;
border:0;
background:#b2af9e;
}
body {
text-align:center;
width:1000px;
font: 12px/18px Tahoma, Helvetica, Arial, sans-serif;
margin:auto;
background:#fff;
}
a {text-decoration: none;text-decoration:none}
a:hover {text-decoration:none}
div{
width:100%;
height:20px;
background-color:#e5edf6;
}
ul li {
float:left;
width:60px;
height:20px;
background-color:#0280C6;
margin:0px;
display:inline;
color:#B6E4FD;
}
ul li:hover{
background-color:#B6E4FD;
color:#0280C6;
}
ul li ul{
display:none;
}
ul li ul li{
width:60px;
height:20px;
background-color:#B6E4FD;
margin:0px;
color:#0280C6;
}
ul li ul li:hover{
background-color:#0280C6;
color:#B6E4FD;
}
ul li ul li a {
text-decoration: none;
color:#0280C6;
text-decoration:none;
}
ul li ul li a:hover {
color: #B6E4FD;
text-decoration:none;
}
</style>
<body>
<ul>
<li>aaa
<ul>
<li><a href="#">aaa1</a></li>
<li><a href="#">aaa2</a></li>
<li><a href="#">aaa3</a></li>
<li><a href="#">aaa4</a></li>
</ul>
</li>
<li>bbb
<ul>
<li><a href="#">bbb1</a></li>
<li><a href="#">bbb2</a></li>
<li><a href="#">bbb3</a></li>
<li><a href="#">bbb4</a></li>
</ul>
</li>
<li>ccc
<ul>
<li><a href="#">ccc1</a></li>
<li><a href="#">ccc2</a></li>
<li><a href="#">ccc3</a></li>
<li><a href="#">ccc4</a></li>
</ul>
</li>
<li>ddd
<ul>
<li><a href="#">ddd1</a></li>
<li><a href="#">ddd2</a></li>
<li><a href="#">ddd3</a></li>
<li><a href="#">ddd4</a></li>
</ul>
</li>
<li>eee
<ul>
<li><a href="#">eee1</a></li>
<li><a href="#">eee2</a></li>
<li><a href="#">eee3</a></li>
<li><a href="#">eee4</a></li>
<li><a href="#">eee5</a></li>
</ul>
</li>
</ul>
</body>
</html>
分享到：
相关推荐
本文将深入探讨基于jQuery实现的下拉全屏导航菜单的知识点，包括其特点、原理、应用以及如何使用提供的源码。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画和Ajax交互。在“jquery下拉...
通常，一级菜单项包含在 `<ul>` 标签中，二级菜单项则嵌套在一级菜单项的 `<li>` 下，使用 `<ul>` 标签包裹。例如： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子...
"jQuery收缩菜单"是一个利用jQuery实现的高效解决方案，旨在提供一种优雅的方式来展示和隐藏网站的导航菜单，从而优化页面布局，提升用户浏览体验。 首先，我们来看看`index.html`。这个文件是网页的主体部分，通常...
"jQuery响应式导航菜单"是一个非常实用的技术，特别是在移动设备普及的今天，它能确保菜单在不同屏幕尺寸下都能良好地展示和交互。下面将详细阐述这个主题。 首先，响应式设计是指网站能够根据用户的设备和屏幕尺寸...
jQuery.mmenu的核心特性之一就是其响应式设计。这意味着菜单会根据用户设备的屏幕尺寸自动调整布局，确保无论是在桌面、平板还是手机上，都能提供良好的可视性和易用性。响应式布局通过CSS媒体查询实现，使得菜单在...
主菜单项是`<li>`元素，而下拉菜单项则作为子`<ul>`嵌套在主菜单项之下。通过CSS设置`display`属性为`none`，默认隐藏下拉菜单。然后使用jQuery选择器定位到相应的元素，并在事件触发时更改`display`属性，使得下拉...
2. `slideToggle()`方法：这个方法是jQuery提供的一个动画效果，它可以使元素在滑动效果下切换其显示状态。当一个面板被点击时，`slideToggle()`会使该面板的可见性发生切换，即如果当前是隐藏状态，则展开；反之，...
当用户在前端选择了一个父级菜单项后，Struts Action会接收到这个请求，然后查询数据库以获取与之关联的子菜单项。这里可能需要使用Hibernate或MyBatis等ORM框架进行数据库操作。 接着，Action将查询结果转换成JSON...
二级菜单通常嵌套在一级菜单项下，可以通过 `ul` 和 `li` 元素来实现。例如： ```html 菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <!-- 更多一级菜单项 --> ``` 接...
标题中的"jquery插件之jquery导航菜单（垂直风格）"指的就是利用jQuery技术制作的一种特定样式——垂直布局的导航菜单。这种菜单通常出现在页面的左侧或右侧，使得用户可以轻松地通过点击各个菜单项来访问不同的页面...
在网页设计中，交互性和用户体验是至关重要的因素之一，而菜单作为用户导航网站的主要途径，其设计必须直观且易于操作。jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理、动画效果以及Ajax交互，...
鼠标事件是用户与页面交互的主要方式之一，而jQuery提供了click、mouseover、mouseout等多种鼠标事件方法来响应用户的操作。在这个实例中，点击事件(.click)被用来触发导航菜单项的展开与折叠。 动画方法是jQuery中...
本篇文章将详细讲解如何利用jQuery实现一个自适应窗口大小的导航菜单，以及与之相关的技术点。 首先，自适应导航菜单是网页设计中的一个重要组成部分，尤其在响应式网页设计中更为关键。它确保了无论用户是在桌面...
通常，子菜单项会嵌套在主菜单项之下，使用`<ul>`和`<li>`标签进行组织。 2. **CSS样式**：通过CSS定义菜单的外观，包括颜色、字体、位置等。对于图文下拉菜单，还需要设置图片的显示方式，例如作为背景图或内联...
HoverAccordion的独特之处在于，当鼠标悬停在菜单项上时，它会以折叠和展开的效果来显示子菜单，这种交互方式既节省空间又具有视觉吸引力。 首先，让我们深入了解一下jQuery。jQuery是一个轻量级、高性能的...
5. **响应式设计**：确保菜单在不同设备和屏幕尺寸下都能正常工作。可能需要调整菜单的大小、位置和触发区域，以适应移动设备的窄屏幕。 实现步骤大致如下： 1. 引入jQuery库，确保页面头部包含jQuery的CDN链接...
2. **垂直导航菜单**：垂直导航菜单是布局方式之一，其菜单项沿页面垂直方向排列。这种菜单在多级导航或需要大量分类的网站中非常常见，因为它能有效地利用空间。 3. **筛选功能**：这个菜单增加了筛选功能，允许...
本文将详细讲解如何使用jQuery创建一个伸缩的、垂直型的下拉菜单，以及与之相关的技术点。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务。在实现下拉菜单时，jQuery可以提供...
"jquery导航栏响应式菜单"是一个基于JavaScript库jQuery实现的，专门用于创建在不同屏幕尺寸下都能良好工作的导航菜单。 jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax...
在网页设计中，交互性和用户体验是至关重要的因素之一，而导航菜单作为用户浏览网站的向导，其设计和实现方式直接影响着用户对网站的第一印象。本主题将深入探讨"基于jQuery的垂直菜单特效"，结合CSS3技术，打造富有...