<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
//找到所有li标记中包含的ul标记
//然后找到它的前一个标记（即<a>）,并添加click事件
$("li").find("ul").prev().click(function(){
//单击时让后面的兄弟切换样式
$(this).next().toggleClass("myHide");
});
});
</script>
<style type="text/css">
#navigation{
width:200px;
}
a{
outline:none;
}
/*主菜单样式*/
#navigation > ul{
list-style-type:none;/*不显示项目符号*/
margin:0;
padding:0;
}
#navigation > ul > li{
border-bottom:1px solid #FFFFFF;
}
#navigation > ul > li > a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #003300;/*左侧粗边阴影*/
border-right:1px solid #003300;/*右侧边阴影*/
}
#navigation > ul > li > a:link,#navigation > ul > li > a:visited{
background-color:#006633;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{
background-color:#003300;
color:#FFFF00;
}
/*子菜单样式*/
#navigation ul li ul{
list-style-type:none;/*不显示项目符号*/
margin:0;
padding:0;
}
#navigation ul li ul li{
border-bottom:1px solid #FFFFFF;
}
#navigation ul li ul li a{
display:block;
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #FF0000;/*左侧粗边阴影*/
border-right:1px solid #FF0000;/*右侧边阴影*/
}
#navigation ul li ul li a:link,#navigation ul li ul li a:visited{
background-color:#FF3333;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#FF0000;
color:#FFFF00;
}
#navigation ul li ul.myHide{
display:none;
}
</style>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">home</a></li>
<li><a href="#">news</a>
<ul>
<li><a href="#">lasttestnews</a></li>
<li><a href="#">allnews</a></li>
</ul>
</li>
<li><a href="#">sports</a>
<ul>
<li><a href="#">basketball</a></li>
<li><a href="#">football</a></li>
<li><a href="#">volleyball</a></li>
<li><a href="#">goodball</a></li>
</ul>
</li>
<li><a href="#">weather</a>
<ul>
<li><a href="#">today's weather</a></li>
<li><a href="#">forecast</a></li>
</ul>
</li>
<li><a href="#">call me</a></li>
</ul>
</div>
</body>
分享到：
相关推荐
<title>jQuery侧边伸缩菜单 .side-menu { width: 200px; background-color: #333; height: 100%; position: fixed; top: 0; left: -200px; transition: left 0.5s ease; } .side-menu.open { left: 0;...
jQuery伸缩型菜单是一种在网页开发中常用的交互式导航组件，它允许用户通过鼠标悬停或点击来展开或收缩子菜单项，为用户提供更直观、更便捷的浏览体验。这种菜单设计尤其适用于多层次的网站结构，能有效地组织大量...
本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航，当鼠标悬停在导航项上时，其子菜单会向左滑动展开。 首先，我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
在介绍jQuery实现的动态伸缩导航菜单实例中，我们首先需要了解jQuery这个前端开发常用的JavaScript库。jQuery极大的简化了JavaScript编程，尤其在处理文档结构、事件处理、动画效果以及Ajax交互等方面提供了简便的...
总的来说，“jquery左侧自动伸缩菜单”涉及到jQuery的基本使用，事件处理，动画效果，以及一些高级特性如插件开发和响应式设计。通过熟练掌握这些知识点，开发者可以创建出功能强大、用户体验优秀的网页导航菜单。在...
在本文中，我们将深入探讨如何使用jQuery来创建一个动态的左侧伸缩导航菜单。这个菜单是基于`jquery-1.8.3.min.js`库构建的，提供了多种交互效果，包括无缓动的展开和隐藏，以及两种不同类型的百叶窗效果。我们将...
在这个"jQuery 伸缩菜单（典型、简单的实例）"中，我们将深入探讨如何利用 jQuery 实现一种常见的菜单效果：点击菜单项时，子菜单能够展开或收缩。 首先，我们需要理解 jQuery 的基本用法。jQuery 提供了一个简化的...
7. **插件扩展**：jQuery 社区提供了许多插件，如 `metisMenu` 或 `mmenu.js`，它们专门用于创建高级的伸缩菜单，可以简化开发过程并提供更多的自定义选项。 在实际应用中，开发者通常会结合HTML结构、CSS样式以及...
本文将深入探讨如何利用jQuery实现伸缩效果，这是一种常见且实用的交互设计，常用于菜单、折叠面板或内容展示等场景。 首先，理解jQuery实现伸缩效果的基本原理：通过CSS控制元素的显示和隐藏，然后利用jQuery的...
本主题聚焦于使用jQuery实现的页面左侧伸缩下拉导航菜单，这是一款常见的前端功能，尤其适用于内容丰富的网站。jQuery是一种轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得开发者能够更...
《使用jQuery创建竖向伸缩菜单的实践指南》 在网页设计中，菜单是一个至关重要的元素，它为用户提供了导航网站的便捷途径。本篇文章将深入探讨如何利用jQuery这一强大的JavaScript库来创建一个竖向伸缩菜单。我们将...
总结来说，这个"jquery 菜单 伸缩"项目是一个使用jQuery和JavaScript实现的交互式菜单系统，它具有三个不同的视觉皮肤（Silver、Classic、Blue）和一个示例文件（menu11.html）。开发者通过编写`myMenu.js`实现了...
综上所述，创建一个jQuery伸缩下拉菜单涉及到HTML结构设计、CSS样式设定、jQuery事件监听以及可能的响应式布局。通过熟练掌握这些技术，你可以构建出既美观又实用的导航菜单，提升网站的用户体验。在实际项目中，还...
"58、jQuery可伸缩关闭的菜单栏"这个主题涉及到的是使用jQuery实现一个交互式的菜单栏，该菜单栏可以根据用户的需求进行展开和收起，提高用户体验。以下是对这一知识点的详细说明： 1. **jQuery基础**： - jQuery...
在本项目中，我们探讨的是如何使用jQuery实现图片的伸缩效果，这是一种常见的网页动态视觉效果，可以提升用户体验，使页面更具吸引力。 首先，`index.html`是网页的主文件，它定义了网页的基本结构。在这个文件中，...
在本文中，我们将深入探讨如何使用jQuery库创建一个伸缩型菜单。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及AJAX交互等任务，使得前端开发更加高效。在这个实例中，我们将关注...
【jQuery左右伸缩导航】是一种常见的网页交互设计，利用JavaScript库jQuery实现的动态导航菜单，其特点是通过左右滑动效果来展示或隐藏子菜单，既增强了用户体验，也节省了页面空间。这种导航栏在现代网页设计中十分...
本资源"jQuery滑动侧边栏实现多级菜单插件jSide.zip"提供了使用jQuery创建动态、交互式侧边栏菜单的解决方案。以下是关于这个插件及其使用的一些关键知识点： 1. **jQuery库**: jQuery 是一个轻量级的JavaScript库...
《jQuery后台左侧伸缩菜单代码实现详解》 在网页开发中，用户界面的交互性与易用性至关重要，尤其在后台管理系统中，一个简洁而高效的导航菜单能够极大地提升工作效率。"jQuery后台左侧伸缩菜单代码"是专为后台管理...