<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>
分享到:
相关推荐
DIV伸缩菜单DIV伸缩菜单DIV伸缩菜单DIV伸缩菜单DIV伸缩菜单DIV伸缩菜单
C#Winform左侧伸缩菜单实现
flash 伸缩菜单源码 flash 伸缩菜单源码 flash 伸缩菜单源码
css竖型鼠标触发伸缩菜单,很实用。解压后直接运行就可以看到你想要的效果!
伸缩菜单可定制的,使用起来很不错 伸缩菜单可定制的,使用起来很不错伸缩菜单可定制的,使用起来很不错
卤煮仿照Word写的滑动导航条和伸缩菜单。大家有需要可以多多参考!
iOS 伸缩菜单 SvpplyTable ,SvpplyTable 通过 UITableView 实现了可扩展和收缩的菜单,类似 Svpply。
这一篇主要讲JS特效代码大全(三)可折叠的自动伸缩菜单。可折叠的自动伸缩菜单适合于最多到二级菜单、菜单数量较多且页面要求比较精致的网站,打开一个菜单的同时另一个菜单就会自动缩回去。
实现类似qq伸缩菜单,灵活定制,限定值好菜单,利于编辑。
jQuery 伸缩菜单(典型、简单的实例) jQuery 伸缩菜单(典型、简单的实例) jQuery 伸缩菜单(典型、简单的实例)
鼠标移动到导航上后,导航内容向左滑出隐藏
防制作www.0757wz.com伸缩菜单jquery打造的竖向伸缩菜单。另外需要条用到 http://www.0757wz.com/themes/script/jquery.js这个文件
伸缩菜单简单,便于修改,兼容主流浏览器。
query带动画的伸缩菜单和自定义滚动条样式,css3,html5代码特效,query带动画的伸缩菜单和自定义滚动条样式,css3,html5代码特效
3级树形下拉菜单,适合制作各种列表,树形可伸缩菜单
jQuery CSS3弹性工具栏伸缩菜单代码是一款效果不错的默认只显示一个圆形按钮,单点击按钮时,子菜单项会以弹性动画展开显示二级图标导航的网页特效。 js代码 [removed][removed] [removed] $( ".button" )....
带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义,带动画伸缩菜单可分级菜单超出后自动显示滚动条滚动条样式自定义
类似QQ的伸缩菜单.......
本文所述为基于C#实现的折叠菜单,风格仿照Windows打开我的电脑后左侧的伸缩菜单效果,并且同样是蓝色的效果,看着和windows的效果一样漂亮,可以实现折叠、展开等功能。这在学习C#界面编程的时候能用上,其主要实现...