非常精彩的导航菜单，推荐！_导航菜单特效_网页特效库

·网页特效库 ·网页工具库

< 后退 | 收藏网页特效库

推荐网页特效

更多推荐特效

购物网站的导航效果，推荐！

向上下左右滚动图片的特效

超级变态广告代码

加入收藏夹

防止选择和复制

新浪博客的提示窗口，推荐！

网页工具库 - 让网页制作更轻松

推荐网页工具

更多网页工具

在线html编辑器

在线CSS编辑器

滚动条颜色生成器

弹出窗口生成器

网页加密解密工具

汉字转换成拼音工具

文本繁简体转换工具

您的位置：网页特效库 >> 导航菜单特效>> 非常精彩的导航菜单，推荐！	查看此特效演示

非常精彩的导航菜单，推荐！

把如下代码复制到<head>与</head>之间

<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>

<script>
/* 
这是把事件动作绑定到菜单上的函数
*/
function attachXMenu(objid){
  var tds=objid.getElementsByTagName('td');
    for(var i=0;i<tds.length;i++){
      with(tds[i]){
        onmouseover=function(){
          with(this){
            filters[0].apply();
            style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
            style.border='1px solid #ffffff'; //边框
            style.color='black'; //文字颜色
            filters[0].play();
            }
              }
        onmouseout=function(){
          with(this){
            filters[0].apply();
            style.background='#336699'; //这是鼠标离开时的背景颜色
            style.border='1px solid #336699'; //边框
            style.color='#ffffff'; //文字颜色
            filters[0].play();
            }
              }
            }
        }
}
</script>

把如下代码复制到<body>与</body>之间

使用说明：代码中有横、坚两个导航菜单，两个菜单的代码在代码中有注释，选择你需要的，在<body></body>代码区将另一个菜单的代码删掉即可，菜单的内容和链接在<body></body>代码区可以自行更改，增加或减少只需按代码中的样式更改。菜单中鼠标移上的颜色和鼠标移开时的颜色可以在<head></head>代码修改，代码中有注释，也可以使用图片作为背景，只需将其中的颜色代码改为 url(图片名称) 即可。<body></body>代码区的bgcolor="#336699"为表格默认的背景颜色，当然也可以使用图片作为背景，改为 background="图片名称" 即可。

上一个特效：购物网站的导航效果，推荐！

下一个特效：简洁的双级导航菜单，推荐！

网页工具库 - 让网页制作更轻松

网页特效库

关于我们 | 联系本站 | 免责声明 | 版权声明 | 网站地图 | 友情链接 | 鄂ICP备05023174号
Copyright © 2008 www.butong.net.All Rights Reserved.