css+java 侧面导航栏

hduyou

浏览: 23366 次
性别:
来自: 杭州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript学习

CSS Java XHTML HTML

<!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>

分享到：

js 动画 | js 关于鼠标在页面中坐标显示的种种

2010-10-25 17:11
浏览 1706
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css+java 侧面导航栏

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

css+java 侧面导航栏

评论

发表评论

相关推荐

屏蔽表单修改

css 分页效果

全景展示

js 动画

js 关于鼠标在页面中坐标显示的种种

js 牛人的博客 学习的好地方

js 图片切换效果

js 几款图片切换 特效

js 107个常用javascript语句

js 判断浏览器类型以及操作系统

js 一些正则表达式（转载）

js 自定范围产生随机数字

js 两种方式进行字符匹配

js 简单代码 有个疑问 请高手解答

js 杨辉三角

js 减少全局变量污染的方法

js replace使用

js 方法扩展

js 判断数组以及数字

js学习 伪类及原型

最近访客更多访客>>

js 牛人的博客学习的好地方

js 几款图片切换特效

js 简单代码有个疑问请高手解答

js学习伪类及原型