<!--[if ie 6]>
<style>
#topNav ul li { float: left; height: 1%; }
#topNav ul li a { height: 1%; }
</style>
<![endif]-->
<body onload="init();">
<div id="topNav">
<ul>
<li><a href="#">Recipes</a>
<ul class="subNav">
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li>
<a href="#">Contact Us</a>
<ul class="subNav">
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div>
<dir id="other">some other content</dir>
</body>
#topNav ul li ul {
display: none;
}
/*来自CSS精粹第3版*/
#topNav {
width: 200px;
}
#topNav ul {
list-style: none;
margin: 0;
padding: 0;
}
#topNav li {
border-bottom: 1px solid #ED9F9F;
}
#topNav li a:link,#topNav li a:visited {
font-size: 90%;
display: block;
padding: 0.4em 0 0.4em 0.5em;
border-left: 12px solid #711515;
border-right: 1px solid #711515;
background-color: #B51032;
color: #FFFFFF;
text-decoration: none;
}
#topNav li a:hover {
background-color: #711515;
color: #FFFFFF;
}
#topNav ul ul {
margin-left: 12px;
}
#topNav ul ul li {
border-bottom: 1px solid #711515;
margin: 0;
}
#topNav ul ul a:link,#topNav ul ul a:visited {
background-color: #ED9F9F;
color: #711515;
}
#topNav ul ul a:hover {
background-color: #711515;
color: #FFFFFF;
}
function init(){
$('#topNav ul li').bind('click',{},collapse);
}
function collapse(event){
$(this).siblings().find('.subNav').css('display','none');
// $(this).find('.subNav').css('display','block');
// $(this).find('.subNav').slideDown('normal');
// $(this).find('.subNav').fadeIn('slow');
$(this).find('.subNav').show('normal');
}
分享到：
相关推荐
在本文中，我们将深入探讨如何使用C# WinForm开发具有Web2.0外观的可折叠导航菜单控件。首先，我们需要理解Web2.0的概念，它代表了互联网的一个新时代，强调用户交互性、社区参与度和富媒体内容。将这种外观应用于...
本文将深入探讨“竖向二级折叠导航菜单（只展开一个）”这一主题，这是一种常见的网页布局策略，旨在优化用户体验，尤其是在移动设备上。 首先，我们要理解“竖向二级”这一概念。竖向导航菜单是指菜单项沿着页面的...
【标题】：“侧面折叠导航菜单.rar”是一个C#和VB.NET开发的侧边栏导航菜单项目，它包含完整的源代码，适用于.NET Framework 2.0环境。这个菜单系统设计为可折叠，使得用户界面更加简洁且易于操作。 【描述】：此...
"支持响应式手机端的JS手风琴折叠导航菜单特效"是一个专为手机网站设计的导航菜单，利用JavaScript（可能结合jQuery库）和CSS技术，实现了一种优雅的交互效果。 首先，手风琴特效是一种常见的UI设计元素，它允许...
"CSS+js无限级折叠导航菜单"就是一个专为实现这种功能而设计的技术方案。这个方案结合了CSS（层叠样式表）和JavaScript的力量，创建了一个可以无限层级扩展的折叠式导航菜单，既美观又实用。 首先，CSS在其中起着...
"jQuery+CSS3左右摇摆可滑动展开折叠导航菜单"是一个利用这两种技术创建的交互式菜单，它提供了吸引用户的动态视觉效果。在这个项目中，我们将深入探讨如何使用jQuery和CSS3来构建这样的功能。 首先，jQuery是一个...
"jQuery手风琴折叠导航菜单特效"是一种常见的交互设计手法，它优化了用户体验，尤其是在有限的空间内展示大量分类时。本知识点将深入探讨这种特效的实现原理及应用。 首先，jQuery是一种轻量级的JavaScript库，它...
在现代网页设计中，可折叠导航菜单控件是不可或缺的一部分，尤其在Web2.0的背景下，这种设计元素显得尤为重要。Web2.0的核心理念在于增强用户体验，促进用户交互，而可折叠导航菜单正是实现这一目标的有效手段。下面...
在构建折叠式导航菜单时，元素可以作为菜单容器，帮助搜索引擎和辅助技术理解页面内容的结构。 折叠式菜单的核心在于JavaScript或CSS的交互效果，但在HTML5中，我们可以通过数据属性（data-*）来添加自定义信息，...
可以手动或自动生成一系列可折叠的侧位导航栏，导航栏菜单可以更换图标、增加菜单内容，可以直接在目标程序中调用该导航栏。
《jQuery实现的立体折叠导航菜单——meny.js详解》 在网页设计中，导航菜单是不可或缺的一部分，它为用户提供了一种简洁、直观的界面来访问网站的各个部分。随着技术的发展，JavaScript库如jQuery提供了丰富的功能...
【标题】"jQuery鼠标经过立体显示折叠导航菜单代码meny.zip"所涉及的知识点主要集中在JavaScript库jQuery的使用上，特别是关于动态效果和导航菜单的构建。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件...
本资源"jQuery实现的课程管理左侧边可折叠导航菜单栏特效源码(简单大方)"正是利用jQuery的强大功能，为课程管理系统提供了一种直观且高效的界面元素——可折叠的侧边导航菜单栏。下面将详细讲解这个源码所涉及的...
可折叠导航菜单在网页设计中扮演着重要角色，尤其是在移动设备上。它可以节省屏幕空间，使得用户能够方便地展开和收起菜单项，从而改善用户体验。简洁的JQuery竖导航菜单正是这种设计理念的体现，它既保持了界面的...
在Windows Presentation Foundation（WPF）框架中，创建一个自定义的左侧折叠导航菜单是一项常见的任务，它可以提升应用程序的用户体验，使用户能够轻松地在多个功能模块间切换。本篇文章将详细探讨如何实现这一功能...
在本文中，我们将深入探讨如何使用JavaScript来实现一个移动端可折叠导航菜单，具有现代都市风格。这个菜单设计简洁，响应迅速，适用于手机和平板设备，为用户提供流畅的导航体验。 首先，HTML结构是构建可折叠导航...
今天介绍的是一款利用CSS3和jQuery实现的可折叠导航菜单，其设计目的是为了在移动设备的网页上提供一个简洁且易用的导航解决方案。 从标题中我们可以得知，这个导航菜单具有以下特点：1）可折叠功能；2）适合用于...
此外，考虑到响应式设计，这套可折叠导航菜单可能还包含了媒体查询（Media Queries），以确保在不同设备和屏幕尺寸上都能良好工作。例如，可能在小屏幕设备上默认折叠菜单，而在大屏幕设备上显示全部菜单项。 总的...