模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
JS+Css伸缩菜单,红色_菜单导航特效
查看演示效果
特效Tag:
菜单
折叠菜单
添加
JS+Css伸缩菜单,红色,很好看。注:IE6下似乎有点不正常,用的朋友自己修正下!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>伸缩的菜单-/</title> <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; } #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> </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>
所属频道:
菜单导航特效
/
更新时间:2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
来自GG网站的超酷JS导航代码
绝对不错的滚动的导航菜单栏
DIV+js后台左侧专用菜单
纯CSS实战竖向导航菜单
完美兼容的纯CSS下拉菜单,不可错过
将滑动门改为选项卡(需鼠标点击那种)的方法
CSS仿迅雷视频首页导航条(蓝色)
爆炸式菜单,点击后展开
竖向选项卡,蓝色样式
纵向无序的CSS列表菜单
猜你也喜欢看这些
CSS完成神奇创意的相框
仿淘宝星星投票,兼容性好
在图片上单击获取图片原始大小
飘动的图片
JS弹性图片拖动特效
图片雷达效果,像光照一样
JavaScript等比例缩放图片
在网页随意可拖动图片移动位置
来自新浪的一款简洁JS焦点图切换代码
同一页面调用并显示多个图片幻灯切换效果
相关链接:
复制本页链接
|
搜索JS+Css伸缩菜单,红色
特效说明:
菜单导航模板
-
JS+Css伸缩菜单,红色
。