模板无忧
网页特效
每日更新
|
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> <FCK:meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" /> <title>选项卡式导航</title> <style type="text/css"> <!-- * { margin: 0; padding:0 } body { margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; text-align: center; height: auto; width: auto; background-color: #666666; font-size: 12px; color: #000000; } #container { text-align: left; width: 760px; height: 400px; background-color: #FFFFFF; padding: 20px; } #container #title { height: 28px; } #container #title li { float: left; list-style-type: none; height: 28px; line-height: 28px; text-align: center; margin-right: 1px; } #container #title ul { background-color: #FFFFFF; height: 28px; } #container #title a { text-decoration: none; color: #000000; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -29px; } #container #title a span{ display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -29px; padding: 0 15px 0 15px; } #container #title #tag1 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -87px; } #container #title #tag1 a:hover span{ display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title #tag2 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left 0px; } #container #title #tag2 a:hover span{ display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title #tag3 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -58px; } #container #title #tag3 a:hover span{ display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title #tag4 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -145px; } #container #title #tag4 a:hover span{ display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title #tag5 a:hover { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -174px; } #container #title #tag5 a:hover span{ display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #title .selectli1 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -87px; } #container #title a .selectspan1 { display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -87px; padding: 0 15px 0 15px; } #container #title .selectli2 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left 0px; } #container #title a .selectspan2 { display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right 0px; padding: 0 15px 0 15px; } #container #title .selectli3 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -58px; } #container #title a .selectspan3 { display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -58px; padding: 0 15px 0 15px; } #container #title .selectli4 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -145px; } #container #title a .selectspan4 { display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -145px; padding: 0 15px 0 15px; } #container #title .selectli5 { text-decoration: none; color: #ffffff; display: block; width: auto; background: url(http://p1.mb5u.com/texiao/2010052300481145.gif) no-repeat left -174px; } #container #title a .selectspan5 { display: block; background: url(http://p1.mb5u.com/texiao/2010052300481144.gif) no-repeat right -174px; padding: 0 15px 0 15px; } #container #mrc ul {margin: 10px;} #container #mrc li {margin: 5px; } #container #mrc li img {margin: 5px;display:block;} #container #mrc { height: 300px; padding: 10px; } .mrc1 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #3A81C8; border-right-color: #3A81C8; border-bottom-color: #3A81C8; border-left-color: #3A81C8; background-color: #DFEBF7; } .mrc2 { border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #ff950b; border-right-color: #ff950b; border-bottom-color: #ff950b; border-left-color: #ff950b; background-color: #FFECD2; } .mrc3 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FE74B8; border-right-color: #FE74B8; border-bottom-color: #FE74B8; border-left-color: #FE74B8; background-color: #FFECF5; } .mrc4 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #00988B; border-right-color: #00988B; border-bottom-color: #00988B; border-left-color: #00988B; background-color: #E8FFFD; } .mrc5 { height: 300px; padding: 10px; border-top-width: 3px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #A8BC1F; border-right-color: #A8BC1F; border-bottom-color: #A8BC1F; border-left-color: #A8BC1F; background-color: #F7FAE2; } .hidemrc {display:none;} --> </style> <script language="javascript"> function switchTag(tag,mrc) { // alert(tag); // alert(mrc); for(i=1; i <6; i++) { if ("tag"+i==tag) { document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i; document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span") [0].className="selectspan"+i; }else{ document.getElementById("tag"+i).getElementsByTagName("a")[0].className=""; document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span") [0].className=""; } if ("mrc"+i==mrc) { document.getElementById(mrc).className=""; }else{ document.getElementById("mrc"+i).className="hidemrc"; } document.getElementById("mrc").className=mrc; } } </script> </head> <body> <div id="container"> <div id="title"> <ul> <li id="tag1"><a href="#" onclick="switchTag('tag1','mrc1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li> <li id="tag2"><a href="#" onclick="switchTag('tag2','mrc2');this.blur();"><span>下载中心</span></a></li> <li id="tag3"><a href="#" onclick="switchTag('tag3','mrc3');this.blur();"><span>产品介绍</span></a></li> <li id="tag4"><a href="#" onclick="switchTag('tag4','mrc4');this.blur();"><span>会员注册与登录</span></a></li> <li id="tag5"><a href="#" onclick="switchTag('tag5','mrc5');this.blur();"><span>联系我们</span></a></li> </ul> </div> <div id="mrc" class="mrc1"> <div id="mrc1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div> <div id="mrc2" class="hidemrc">2、不同的项目使用不同的颜色来区分</div> <div id="mrc3" class="hidemrc">3、这回需要使用到js了，呵呵</div> <div id="mrc4" class="hidemrc">4、背景图片只需要两个图片文件就足够，减少服务器负担</div> <div id="mrc5" class="hidemrc">5、这是使用到的两个图片： <table width="58%" border="1" cellspacing="2" cellpadding="0"> <tr> <td width="70%" align="center"><img src="http://p1.mb5u.com/texiao/2010052300481144.gif" width="250" height="290" /></td> <td width="30%" align="center"><img src="http://p1.mb5u.com/texiao/2010052300481144.gif" width="15" height="290" /></td> </tr> </table> </div> </div> </div> </body> </html>
所属频道：
菜单导航特效
/
更新时间：2011-02-23
[收藏]
[报错]
[返回列表]
相关
菜单导航特效
：
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
仿QQ的菜单，三级竖向
近来门户网常用的文字与图片切换效果
多颜色菜单
适应产品类网站点击向两侧展开的菜单
自适应宽度的CSS圆角背景的菜单按钮
仿网易漂亮的TAB选项卡(标签)
鼠标放上图标会闪烁的菜单
桌面右键菜单
在网页右上角隐藏的滑出菜单
三级树形竖向收缩列表菜单
猜你也喜欢看这些
jQuery 1.4 循环图片滚动
CSS制作的类似相册浏览的功能
CSS趣味图片边框之——带间隔的大边框代码
一行代码解决图片放大小图的功能
缓慢飘起的JS浮动图片代码
JS+CSS鼠标放图片上改变透明度
感应鼠标的图片遮罩动画效果
JS实现鼠标悬停图片交换
向上翻动的内容切换示例
图片渐渐出现脚本
相关链接：
复制本页链接
|
搜索选项卡式导航
特效说明：
菜单导航模板
-
选项卡式导航
。
。