<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的菜单</title>
<link href="show.css" type="text/css" rel="stylesheet">
<style>
<!--
#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 5px;
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;
}
#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,#navogation 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";
}
function wclick(){
var op=document.getElementById("listUL");
var op1=op.childNodes;
var op2=op1[3];
var op3=op2.getElementsByTagName("ul");
var op4=op3[0].getElementsByTagName("li");
alert("weather下子项数:"+op4.length+"分别是"+op4[0].childNodes[0].childNodes[0].nodeValue+" "+op4[1].childNodes[0].childNodes[0].nodeValue);
//第一个childNode【0】得到的是标签a
//当点击”Weather”时,弹出警告窗口,输出Weather里面的子菜单项个数
//和子菜单项名称。
}
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; //动态添加点击函数
}
}
var op=document.getElementById("listUL");
var op1=op.childNodes;
var op2=op1[3];
op2.attachEvent("onclick",wclick);
}
</script>
</head>
<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>
</html>
分享到:
相关推荐
HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开导航栏 HTML+CSS 侧边展开...
HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...
html+css+js隐藏导航栏
"CSS+Div+JS实现简单导航栏菜单栏"是一个基础但实用的主题,它涵盖了网页布局、样式设计以及交互功能的实现。接下来,我们将深入探讨这三个关键技术在创建导航栏菜单栏中的应用。 首先,CSS(层叠样式表)是用于...
基于css+java开发的票据管理系统(在线解析银行票据,数据预测,管理)源码(课设).zip基于css+java开发的票据管理系统(在线解析银行票据,数据预测,管理)源码(课设).zip基于css+java开发的票据管理系统(在线解析银行...
"CSS+JS完美简约导航栏"是一个旨在简化美工工作、提高用户体验的解决方案。在这个项目中,结合了CSS(层叠样式表)和JavaScript的技术,以创建一个既美观又功能强大的导航栏。 首先,我们来探讨CSS在导航栏中的应用...
文章主要介绍了如何使用HTML和CSS3来制作一个简单而大方的侧边导航栏。下面详细解析了文中所提及的知识点: 1. HTML结构 - <div class="sidebar"></div>: 用于包裹整个侧边导航栏的容器,类名sidebar定义了这个...
淘宝首页的HTML+CSS+JS源码是一套用于学习和实战前端开发的资源,它基于2019年06月的淘宝网首页设计,力求还原度高达99%。这个项目不仅包含了基本的HTML结构,还融合了CSS样式表和JavaScript脚本,使得页面动态效果...
自制的纯html+css下拉导航栏,支持ie6、ie7、ie8.火狐。 使用中遇到的问题,请到qq群61601502讨论
4. 使用 CSS 选择器和媒体查询控制导航栏在不同屏幕尺寸下的行为。 5. 考虑交互效果,提升用户体验。 通过熟练掌握这些技术,你可以轻松创建出一个功能强大且美观的侧边伸缩导航栏,为你的网站增添更多亮点。
包含html-CSS-javascript-vue-element等多项基础知识课件详解,为web开发提供基础技术。并包含一个web项目的示例代码,利于掌握Java后台和前端的程序设计流程。
对于响应式设计,我们可以使用CSS媒体查询(`media query`)来改变导航栏在不同屏幕尺寸下的行为。 总结起来,创建一个HTML+CSS侧边抽屉式导航栏涉及到以下几个关键点: 1. HTML结构:`<nav>`元素存放导航链接,触发...
"CSS+JS自动生成导航栏"的主题旨在利用这两种核心技术来创建动态且具有吸引力的导航菜单。CSS(层叠样式表)用于定义元素的外观和布局,而JavaScript则负责增加交互性和动态效果。 首先,我们要理解CSS在创建导航栏...
以上就是使用CSS+DIV创建横排和竖排导航栏的基本方法。实践中,可能还需要考虑其他细节,如字体样式、边距、圆角、过渡效果等,以打造出更美观、功能齐全的导航栏。通过不断实践和调整,你可以根据自己的需求和创意...
框架:html + css + js +ssm + java + mysql 前端:html + css + js 后端:ssm + java + mysql 开发工具:ideaIC-2022.3.2.exe + jdk1.7 + Apache Tomcat/8.5.78 https://tomcat.apache.org/download-80.cgi ...
框架:html + css + js +ssm + java + mysql 前端:html + css + js 后端:ssm + java + mysql 开发工具:ideaIC-2022.3.2.exe + jdk1.7 + Apache Tomcat/8.5.78 https://tomcat.apache.org/download-80.cgi ...
人力资源管理系统 框架:html + css + js + jquery + java + ssh + mysql 前端:html + css + js + jquery 后端:java + ssh + mysql 开发工具:ideaIC-2022.3.2.exe + jdk1.8 + Apache Tomcat/8.5.78 ...
科研成果申报管理系统源码(html+css+java
高校学生选课系统项目源码(html+css+java)