模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
淡蓝色竖向简洁Tab_菜单导航特效
查看演示效果
特效Tag：
选项卡
Tab
添加
淡蓝色竖向简洁Tab，选项卡，很多人都喜欢的一种风格。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" mrc="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body{ padding:0;font:12px "宋体"; } #lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;} .lib_tabborder_sx{border:1px solid #95C9E1;} .lib_Menubox_sx {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;} .lib_Menubox_sx ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;} .lib_Menubox_sx li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD} .lib_Menubox_sx li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0; color:#739242;height:25px;line-height:25px;} .lib_Contentbox_sx{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;} --> </style> <script> <!-- function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <div id="lib_Tab1_sx" class="lib_tabborder_sx"> <div class="lib_Menubox_sx "> <ul> <li id="one1" onclick="setTab('one',1,5)" class="hover">最新源码</li> <li id="one2" onclick="setTab('one',2,5)" >ASP类</li> <li id="one3" onclick="setTab('one',3,5)">PHP类</li> <li id="one4" onclick="setTab('one',4,5)">JSP类</li> <li id="one5" onclick="setTab('one',5,5)">.NET类</li> </ul> </div> <div class="lib_Contentbox_sx "> <div id="con_one_1" >新闻列表1</div> <div id="con_one_2" style="display:none">ASP类更新</div> <div id="con_one_3" style="display:none">PHP类更新</div> <div id="con_one_4" style="display:none">JSP类更新</div> <div id="con_one_5" style="display:none">ASP.NET类更新</div> </div> </div> </body> </html>
所属频道：
菜单导航特效
/
更新时间：2012-11-03
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
拖动菜单
又一个Css+JS清新的选项卡、滑动门
始终显示在页面最下部的菜单
CSS实现的目录树型菜单
一个简洁型伸缩菜单
B2B网站的滑动门，可以定义某个TAB是否滑动切换
一个简易的CSS/JS滑动门
UL、LI 无序列表实现纯CSS网站导航菜单
多颜色菜单
JS版下拉菜单生成器
猜你也喜欢看这些
CSS制作的类似相册浏览的功能
一组图片向上滚屏特效
Javascript图片幻灯效果
JavaScript判断图片是否能够加载，失败则替换默认图片
国外的Js图片浏览效果
JavaScript随机图片显示
美化过的匀速图片滚动
JavaScript真正的鼠标放上动画加载大图的代码
CSS将图片自动变为圆角
JS图片溶解出现的特效
相关链接：
复制本页链接
|
搜索淡蓝色竖向简洁Tab
特效说明：
菜单导航模板
-
淡蓝色竖向简洁Tab
。
。。