<style>
<!--
body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation > ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation > ul > li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation > ul > li > a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation > ul > li > a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}
/* 子菜单的CSS样式 */
#navigation ul li ul{
list-style-type:none;
margin:0px;
padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
display:block;
padding:3px 3px 3px 0.5em;
text-decoration:none;
border-left:28px solid #a71f1f;
border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
background-color:#e85070;
color:#FFFFFF;
}
#navigation ul li ul li a:hover{
background-color:#c2425d;
color:#ffff00;
}
#navigation ul li ul.myHide{ /* 隐藏子菜单 */
display:none;
}
#navigation ul li ul.myShow{ /* 显示子菜单 */
display:block;
}
-->
</style>
<script language="javascript">
function change(){
//通过父元素li，找到兄弟元素ul
var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if(oSecondDiv.className == "myHide")
oSecondDiv.className = "myShow";
else
oSecondDiv.className = "myHide";
}
window.onload = function(){
var oUl = document.getElementById("listUL");
var aLi = oUl.childNodes; //子元素
var oA;
for(var i=0;i<aLi.length;i++){
//如果子元素为li，且这个li有子菜单ul
if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length){
oA = aLi[i].firstChild; //找到超链接
oA.onclick = change; //动态添加点击函数
}
}
}
</script>
<body>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a></li>
<li><a href="#">News</a>
<ul class="myHide">
<li><a href="#">Lastest News</a></li>
<li><a href="#">All News</a></li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="myHide">
<li><a href="#">Basketball</a></li>
<li><a href="#">Football</a></li>
<li><a href="#">Volleyball</a></li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul class="myHide">
<li><a href="#">Today's Weather</a></li>
<li><a href="#">Forecast</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</div>
</body>
分享到：
相关推荐
伸缩菜单通常指的是可以动态隐藏或显示的菜单栏，这在空间有限或者需要优化用户界面时非常有用。在C# WinForm中，我们可以使用MenuStrip控件来创建菜单项，并通过编程方式控制它们的可见性，从而实现伸缩效果。 1. ...
"CSS竖型鼠标触发伸缩菜单"是一个实现这种效果的技术，它允许用户通过悬停鼠标来展开或收起菜单项，通常用于导航栏，使得网站的层级结构更加清晰且易于操作。接下来，我们将深入探讨这个主题，了解其工作原理、实现...
本文将详细解析"QT界面框架（滑动导航条+伸缩菜单）"这一主题，以及如何利用QT库实现滑动导航条和伸缩菜单。 首先，QT是Qt Company开发的一个开源跨平台应用程序开发框架，它基于C++，提供了丰富的API和面向对象的...
【炫酷Flash伸缩菜单源码详解】 在网页设计中，菜单是用户导航的重要组成部分，而Flash技术的应用为菜单设计带来了更多创新与可能性。"炫酷Flash伸缩菜单源码"是一个利用Adobe Flash（可能使用ActionScript 2或3）...
在IT行业中，伸缩菜单是一种常见的用户界面元素，尤其在网页设计和开发中扮演着重要角色。这种菜单可以根据用户的操作动态地展开或收起，从而有效地节省空间，提高用户体验。"伸缩菜单可定制"这一主题，意味着我们...
本教程将深入探讨如何使用jQuery实现一个横向伸缩菜单导航，当鼠标悬停在导航项上时，其子菜单会向左滑动展开。 首先，我们需要了解jQuery的基本用法。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理...
在网页设计中，"DIV伸缩菜单"是一种常见的交互元素，它主要用于网站的导航系统，为用户提供更加便捷的浏览体验。这种菜单利用HTML、CSS和JavaScript技术实现，使得菜单项在用户交互时能够动态地展开或收起，展示或...
而“jquery左侧自动伸缩菜单”则是一种常见的交互设计模式，主要用于提升用户体验，尤其是在内容丰富的网站上。本文将深入探讨jQuery如何实现这样的功能，并提供相关的编程知识点。 jQuery是一款轻量级的JavaScript...
iOS 伸缩菜单 SvpplyTable ,SvpplyTable 通过 UITableView 实现了可扩展和收缩的菜单，类似 Svpply。
在C#编程中，创建一个类似QQ的伸缩菜单（也称为手风琴菜单）是一项常见的任务，这种菜单设计能够高效地展示多个层次的选项，同时保持界面的整洁。本项目实现了这样一个功能丰富的伸缩菜单类，使得开发者可以轻松定制...
在IT领域，树形可伸缩菜单是一种常见的用户界面元素，尤其在网页设计和软件开发中广泛应用。这种菜单以其层次清晰、易于导航的特点，能够有效地组织大量信息，并且通过动态展开和折叠节点来节省屏幕空间。以下是关于...
《使用jQuery创建竖向伸缩菜单的实践指南》 在网页设计中，菜单是一个至关重要的元素，它为用户提供了导航网站的便捷途径。本篇文章将深入探讨如何利用jQuery这一强大的JavaScript库来创建一个竖向伸缩菜单。我们将...
可折叠的自动伸缩菜单就是一种提升用户界面（UI）质量的常见技术，尤其适用于多级菜单结构，它可以帮助用户更高效地浏览和导航网站内容。本文将深入探讨JavaScript在实现这种菜单特效中的应用。 首先，我们来理解...
在网页设计中，创建动态和交互性的用户体验是至关重要的，这正是伸缩菜单和自定义滚动条样式的目的所在。这两个特性都是通过CSS3和HTML5实现的，它们为网站提供了更高级别的用户界面和视觉吸引力。 首先，让我们...
`.click()`用于监听用户的点击事件，`.slideToggle()`则可以实现元素的滑动显示和隐藏，非常适合于制作伸缩菜单。 下面是一个简单的jQuery侧边菜单实现示例： ```html <!DOCTYPE html> , initial-scale=1.0">...
在这个"jQuery 伸缩菜单（典型、简单的实例）"中，我们将深入探讨如何利用 jQuery 实现一种常见的菜单效果：点击菜单项时，子菜单能够展开或收缩。 首先，我们需要理解 jQuery 的基本用法。jQuery 提供了一个简化的...
"带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义"这一主题聚焦于前端开发中的交互设计，主要涉及以下几个核心知识点： 1. **伸缩菜单（Accordion Menu）**： 伸缩菜单是一种节省空间、提升用户...
本文所述为基于C#实现的折叠菜单，风格仿照Windows打开我的电脑后左侧的伸缩菜单效果，并且同样是蓝色的效果，看着和windows的效果一样漂亮，可以实现折叠、展开等功能。这在学习C#界面编程的时候能用上，其主要实现...
本文将深入探讨“简单的三级级联伸缩菜单”这一主题，它是一种常见的网页设计元素，用于组织复杂的信息结构。 三级级联菜单通常指的是在主菜单项下有子菜单，子菜单下还有孙菜单的多级下拉结构。这种设计在大型网站...