模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
一个可以伸展打开的滑动导航栏_菜单导航特效
查看演示效果
特效Tag:
导航栏
添加
一个可以伸展打开的滑动导航栏,写着练习,可能还有些题目,希看高手修正。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滑动导航栏</title> <style type="text/css"> body{margin:10px 0px 0px;padding:0;background-color:black;} ul{margin:0px auto;padding:0px;list-style:none;overflow:hidden;width:1000px;} ul li{float:left;width:80px;height:60px;background-color:#333;text-align:center;font-size:12px;margin-right:1px;color:#999;font-weight:bold;font-family:Verdana;} ul li span{width:100%;height:20px;border-bottom:1px solid black;cursor:pointer;display:inline-block;} </style> <script language="javascript" type="text/javascript"> window.onload=function(){ var submenu=document.getElementsByTagName("li"); var bgcolor=new Array("red","orange","yellow","green","blue","indigo","purple"); for(var i=0;i<submenu.length;i++){ var span=document.createElement("span"); var mrc=document.createTextNode(submenu[i].innerHTML); span.appendChild(mrc); span.style.backgroundColor=bgcolor[i]; submenu[i].innerHTML=""; submenu[i].appendChild(span); submenu[i].onmouseover=function(){hidden();show(this,true);} } var hidden=function(){for(var j=0;j<submenu.length;j++){show(submenu[j],false);}}; } function show(obj,vsb){ obj.style.width=(vsb)?"500px":"80px"; obj.style.height=(vsb)?"500px":"60px"; } </script> </head> <body> <ul> <li>我的博客首页</li> <li>共享资源</li> <li>我的短消息</li> <li>博客服务</li> <li>聊天室</li> <li>在线演示</li> </ul> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2012-11-04
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
纯CSS实战竖向导航菜单
兼容IE/火狐的蓝色CSS多级导航栏
JS折叠菜单
另类的CSS导航菜单
博客里的竖向纯CSS圆角导航栏
可重复使用的简洁Tab选项卡
很不错的阴影菜单,仿XP经典风格
可分级的CSS+JS竖直菜单
简洁纯CSS下拉导航菜单
层提示效果
猜你也喜欢看这些
漫天飞花及文字滚动特效
一款平滑的鼠标放上图片抖动代码
图片淡入淡出过渡的JavaScript代码
Javascript 仿Flash图片轮翻
CSS用Alpha改变图片透明度
鼠标放上图片错位效果
分享一个代码简洁的Jquery slide show 图片切换
相片选择器脚本 任意选择图片
按钮可以控制的JS横向图片滚动
图象淡入淡出 Script
相关链接:
复制本页链接
|
搜索一个可以伸展打开的滑动导航栏
特效说明:
菜单导航模板
-
一个可以伸展打开的滑动导航栏
。