模板无忧
网页特效
每日更新
|
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" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="mrc-type" mrc="text/html; charset=gb2312" /> <title>左侧竖向选项卡TAB</title> </head> <style type="text/css"> <!-- * {font-size:13px;font-family:Arial;} #nav li {list-style:none; width:120px; margin-top:0;padding:4px 6px;} #nav li a {text-decoration:none; color:#666;} #nav li a:hover {color:#333;} .aa {border-right:1px solid #AAC7E9; background:#E8F5FE;cursor:hand;border-top:3px solid #AAC7E9} .bb {border:1px solid #AAC7E9;background:#FFFFDD;cursor:hand;border-top:3px solid #ff9900;} .cc {border-top:4px solid #ff66ff; background:#fcf;cursor:hand;} .list2 { font-size:13px; line-height:20px; padding:3px;text-align:left;background:#FFFFFF;} .list2 li{ color:#555;font-size:13px; line-height:24px; padding:0 0 0 10px;} .list2 a{ text-decoration: underline;} .lfloat {float:left;} .rfloat {float:right;} .ctt{padding:0;clear:both;border-top:1px solid #AAC7E9;border-right:1px solid #AAC7E9;border-bottom:1px solid #AAC7E9;text-align:left;height:307px;} .dis{display:block;} .undis{display:none;} li{list-style: none;} form, ul { padding:0; margin:0;} --> </style> <div style="width:600px"> <div class="lfloat" style="width:126px"> <ul id="nav"> <li class="aa" id="tb_1" onClick="x:hoverli(1);">ASP版</li> <li class="bb" id="tb_2" onClick="i:hoverli(2);">PHP版</li> <li class="aa" id="tb_3" onClick="x:hoverli(3);">CGI版</li> <li class="aa" id="tb_4" onClick="x:hoverli(4);">JSP版</li> <li class="aa" id="tb_5" onClick="x:hoverli(5);">VBASIC版</li> <li class="aa" id="tb_6" onClick="x:hoverli(6);">VC++版</li> <li class="aa" id="tb_7" onClick="x:hoverli(7);">C#.NET版</li> <li class="aa" id="tb_8" onClick="x:hoverli(8);">ASP.NET版</li> <li class="aa" id="tb_9" onClick="x:hoverli(9);">AJAX版</li> <li class="aa" id="tb_10" onClick="x:hoverli(10);">EXTJS版</li> <li class="aa" id="tb_11" onClick="x:hoverli(11);">JQUERY版</li> </ul> </div> <div class="lfloat" style="width:450px;"> <div id="newinfo"> <div class="ctt list2"> <div class="dis" id="tbc_01"> ASP版 </div> <div class="undis" id="tbc_02"> PHP版 </div> <div class="undis" id="tbc_03"> CGI版 </div> <div class="undis" id="tbc_04"> JSP版 </div> <div class="undis" id="tbc_05"> VBASIC版 </div> <div class="undis" id="tbc_06"> VC++版 </div> <div class="undis" id="tbc_07"> C#.NET版 </div> <div class="undis" id="tbc_08"> ASP.NET版 </div> <div class="undis" id="tbc_09"> AJAX版 </div> <div class="undis" id="tbc_010"> EXTJS版 </div> <div class="undis" id="tbc_011"> JQUERY版 </div> </div> </div> </div> </div> </div> <!--div no.1--> <!--快速导航栏--> <script type="text/javascript" language="javascript"> //<!cdata[ function g(o){return document.getElementById(o);} function hoverli(n){ for(var i=1;i<=11;i++){g('tb_'+i).className='aa';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='list2';g('tb_'+n).className='bb'; } function fun(){ hoverli(3); } function hoverli2(n){ for(var i=1;i<=11;i++){g('js_'+i).className='aa';g('jsc_0'+i).className='undis';}g('jsc_0'+n).className='list2';g('js_'+n).className='bb'; } function fun2(){ hoverli2(3); } function hoverli3(n){ for(var i=1;i<=11;i++){g('be_'+i).className='aa';g('bec_0'+i).className='undis';}g('bec_0'+n).className='list2';g('be_'+n).className='bb'; } function fun3(){ hoverli2(3); } //假如要做成点击后再转到请将<li>中的onmouseover 改成 onclick; </script> <body> </body> </html>
所属频道:
菜单导航特效
/
更新时间:2010-05-22
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
宽度可以伸缩的选项卡,来自网易
鼠标滑过放大菜单项的仿FLASH菜单
同一网页使用多个滑动门(选项卡)的方法
带倒三角标记的WEB标准菜单
一个很实用的下拉导航条代码
Mootools做的有意思菜单
仿QQ折叠菜单动感效果(JS+css)
CSS竖排选项卡Tab
适合企业站的DIV+CSS导航菜单
浮动的导航菜单
猜你也喜欢看这些
淘宝网缩略图预览生成大图的代码
JavaScript 在网页上单击鼠标的地方显示图片
图像大小选样式
全页漂浮的图片的广告代码
动态的Loading文字,逐个变大
百叶窗形式的图片渐变交替
改变网页背景图片
纯CSS实现的图片滚动,见过吗?
JS平滑图片滚动
JavaScript判断远程图片是否存在
相关链接:
复制本页链接
|
搜索左侧竖向选项卡TAB
特效说明:
菜单导航模板
-
左侧竖向选项卡TAB
。