您好,欢迎来到模板无忧!
登录
注册
收藏
搜索
地图
帮助
模板无忧
网页特效
网页模板
CMS模板
PPT模板
简历模板
网页特效
视频教程
网页图标
字体下载
CMS教程
DivCss
网站制作
网站运营
网络编程
服务器
请选择您需要的素材分类 |
不限分类
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
关闭顶部
展开顶部
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
聚设
AI小聚 能写会画
域名
展开边栏
关闭边栏
网页特效代码
模板无忧
>
网页特效
>
菜单导航特效代码
>
收藏
分享
查看评论
菜单导航
演示
导航菜单特效 (突出的接钮似效果)_菜单导航特效
查看演示效果
特效Tag:
菜单
特效
添加
织梦DedeCMS视频教程
买空间 租服务器 选网硕互联!
无忧站长工具,百度权重一键全查!
导航菜单特效 (突出的接钮似效果),您可以先修改部分代码再运行.
<!--要完成此效果需要两个步骤 第一步:把如下代码加入到<head>区域中--> <style> <!-- Begin .BorderOn { width:90px; margin-left:10px; border:1px solid #456789 } .BorderOff { width:90px; margin-left:0px; border:1px solid #444444 } A.mBlue:link {color:#00CCFF; text-decoration:none;} A.mBlue:visited {color:#00CCFF; text-decoration:none;} A.mBlue:active {color:#00CCFF; text-decoration:none;} A.mBlue:hover {color:#FF0000; text-decoration:underline;} A.mGreen:link {color:#00FF80; text-decoration:none;} A.mGreen:visited {color:#00FF80; text-decoration:none;} A.mGreen:active {color:#00FF80; text-decoration:none;} A.mGreen:hover {color:#FF0000; text-decoration:underline;} A.mYellow:link {color:#FFFF00; text-decoration:none;} A.mYellow:visited {color:#FFFF00; text-decoration:none;} A.mYellow:active {color:#FFFF00; text-decoration:none;} A.mYellow:hover {color:#FF0000; text-decoration:underline;} //--> </style> <script language="JavaScript1.2"> <!-- Begin offMessage = "Add this menu to your site!" function boxOn(which,message) { if (document.all||document.getElementById) { which.className = 'BorderOn'; if (document.getElementById) { document.getElementById("Message").innerHTML = message } else { Message.innerHTML = message; } } } function boxOff(which) { if (document.all||document.getElementById) { which.className = 'BorderOff'; if (document.getElementById) { document.getElementById("Message").innerHTML = offMessage } else { Message.innerHTML = offMessage; } } } // End --> </script> <!--第二步:如下代码加入到<body>区域中--> <table cellpadding="0" cellspacing="0" width="100"> <tr> <td align="center"> <!-- Header Table // --> <table cellpadding="3" cellspacing="0" bgcolor="#000000" class="BorderOff"> <tr bgcolor="#999999"> <td> <div align="center"><font color="#FEDCBA" size="2" face="Arial">主菜单</font></div> </td> </tr> </table> <!-- End Header Table //--> <!-- Menu Items Tables - To add more, just follow the pattern - Note class= in each <a href> to attach link style colors //--> <!-- Menu Item One Table //--> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Visit the JavaScript Source')" onMouseout="boxOff(this)"> <tr bgcolor="#999999"> <td> <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="link.htm" target="_blank">分类一</a></font> </div> </td> </tr> </table> <!-- Menu Item Two Table //--> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 2')" onMouseout="boxOff(this)"> <tr bgcolor="#999999"> <td> <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mBlue" href="http://www.jojoo.net/" target="_blank">分类二</a></font> </div> </td> </tr> </table> <!-- Menu Item Three Table //--> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 3')" onMouseout="boxOff(this)"> <tr bgcolor="#999999"> <td> <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mGreen" href="http://www.jojoo.net/bb/" target="_blank">分类三</a></font></div> </td> </tr> </table> <!-- Menu Item Four Table //--> <table cellpadding="3" cellspacing="0" class="BorderOff" onMouseover="boxOn(this,'Description 4')" onMouseout="boxOff(this)"> <tr bgcolor="#999999"> <td> <div align="center"><font color="#00FF80" size="2" face="Arial"><a class="mYellow" href="http://www.jojoo.net/ts/" target="_blank">分类四</a></font></div> </td> </tr> </table> <!-- End Menu Items Tables //--> <!-- Message Table //--> <!-- Set the width= of this table the same as the overall width in the <style> //--> <table cellpadding="1" cellspacing="0" bgcolor="#444444" width="90"> <tr bgcolor="#999999"> <td> <!-- Set the width= of this table to the overall width in the style table minus 2x the border width; set the height= long (large) enough to accommodate your longest message //--> <table cellpadding="3" cellspacing="0" bgcolor="#000000" width="88" height="100"> <tr bgcolor="#999999"> <td align="left" valign="top"> <font id="Message" color="#CBA987" size="2" face="Arial">Move your mouse over the menu items.</font> </td> </tr> </table> </td> </tr> </table> <!-- End Message Table //--> </td> </tr> </table>
所属频道:
菜单导航特效
/
更新时间:2010-05-23
[收藏]
[报错]
[返回列表]
评论加载中....
相关
菜单导航特效
:
CSS+div+js组合强大实现超酷菜单
超酷仿GOOGLE首页导航菜单效果
仿网易的滑动门技术DIV+CSS实现
仿蓝色理想网站的导航菜单
鼠标触及带边框菜单
用JS实现的类似框架的链接导航模式
CSS立体层
右键弹出菜单
纯css的导航下拉菜单
隐藏菜单效果
css模拟title和alt的提示效果
下拉菜单链接页面打开方式选择
菜单导航特效Rss订阅
特效代码搜索
菜单导航特效推荐
选项卡式导航
酷似FLASH的竖向菜单
动感的炫彩导航菜单代码
CSS 滑动门,自己写的,没有图片
CSS竖直菜单,好棒!
隐藏菜单
标签在底部的简洁CSS选项卡
竖直右侧滑动的可控菜单,JavaScript+CSS
竖向的TAB网页选项卡
上下伸展的JS菜单
猜你也喜欢看这些
CSS使用overflow实现鼠标经过放大缩略图
一组图片向上滚屏特效
对联
Js图片连续左右滚动代码
禁止对图片用右键(仅支持IE)
图片围成环形滚动,有空间感
按钮可以控制的JS横向图片滚动
JavaScript伪3D轮播图片幻灯切换代码
JavaScript 控制图片改变重叠顺序
漂亮实用的商品图片jquery tips提示框(无图片箭头+阴影)
相关链接:
复制本页链接
|
搜索导航菜单特效 (突出的接钮似效果)
特效说明:
菜单导航模板
-
导航菜单特效 (突出的接钮似效果)
。
鏀惰棌&鍒嗕韩
QQ绌洪棿
鏂版氮寰崥
鑵捐寰崥
浜轰汉缃�
寮€蹇冪綉
鐧惧害鎼滆棌
澶嶅埗缃戝潃
鏇村...