JS导航带横向二级菜单网页特效

时间：2013-11-23 来源：互联网
<!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="Content-Type" content="text/html; charset=utf-8" />
<title>JS导航带横向二级菜单网页特效</title>
<style type="text/css">
/*科e互联CSS基础框架*/
*{padding:0; margin:0; font-size:12px; list-style:none}
.cor_bs,.cor_bs:hover{ color: #ffffff; text-decoration: none; font-size:16px;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center;font-weight:normal}
.kePublic{ background: #fff; padding: 50px 10px 80px; }
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
/*科e互联CSS基础框架结束，可删除*/
/*特效CSS代码 开始*/
#nav,#nav ul,#nav ul li,#nav ul li a:hover,#nav .subnav,#nav .subnav p,#nav .subnav p span,#nav .subnav .arrow{background:url(http://www.internetke.com/uploads/imgbg/other/nav_bg.png) no-repeat;}
#nav{position:relative;width:910px;background-position:0 -36px;margin:10px auto;}
#nav ul{height:36px;line-height:36px;margin-left:10px;padding-right:10px;overflow:hidden;background-position:right -72px;}
#nav ul li{float:left;width:110px;margin-left:-2px;background-position:0 -108px;}
#nav ul li a{font-size:14px;color:#fff;width:102px;display:block;text-align:center;text-decoration:none;margin:0 2px 0 4px;}
#nav ul li a:hover{font-weight:700;background-position:-3px -144px;}
#nav .subnav{display:none;position:absolute;top:41px;width:auto!important;min-width:110px;height:27px;line-height:27px;white-space:nowrap;background-position:0 -180px;}
#nav .subnav p{margin-left:10px;padding-right:10px;background-position:right -234px;}
#nav .subnav p span{display:block;color:#235e99;background-repeat:repeat-x;background-position:0 -207px;}
#nav .subnav p a{font-size:12px;display:inline;color:#235e99;text-decoration:none;margin:0 5px;padding:0 2px;}
#nav .subnav p a:hover{font-weight:400;background-image:none;border-bottom:2px solid;}
#nav .subnav .arrow{position:absolute;top:-4px;display:block;width:11px;height:5px;background-position:0 -261px;}
/*特效CSS代码 结束*/
</style>
</head>
<body class="keBody">
<h1 class="keTitle">JS导航带横向二级菜单网页特效</h1>
<div class="kePublic">
<!--效果html开始-->
<script type="text/javascript">
var get = {
 byId: function(id) {
  return document.getElementById(id)
 },
 byClass: function(sClass, oParent) {
  var aClass = [];
  var reClass = new RegExp("(^| )" + sClass + "( |$)");
  var aElem = this.byTagName("*", oParent);
  for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
  return aClass
 },
 byTagName: function(elem, obj) {
  return (obj || document).getElementsByTagName(elem)
 }
};
window.onload = function ()
{
 var oNav = get.byId("nav");
 var aLi = get.byTagName("li", oNav);
 var aSubNav = get.byClass("subnav", oNav);
 var oSubNav = oEm = timer = null;
 var i = 0;
 
 for (i = 1; i < aLi.length; i++)
 {
  aLi[i].onmouseover = function ()
  {
   //隐藏所有子菜单
   for (i = 0; i < aSubNav.length; i++)aSubNav[i].style.display = "none";
   
   //获取该项下的子菜单
   oSubNav = get.byClass("subnav", this)[0];
   
   //获取该项下的指示箭头
   oEm = get.byTagName("em", this)[0];
   
   //显示该项下的子菜单
   oSubNav.style.display = "block";
   
   //判断显示区域
   oNav.offsetWidth - this.offsetLeft > oSubNav.offsetWidth ? 
   
   //如果在显示范围居左显示
   oSubNav.style.left = this.offsetLeft + "px" :
   
   //超出显示范围居右显示
   oSubNav.style.right = 0;
   
   //计算指标箭头显示位置
   oEm.style.left = this.offsetLeft - oSubNav.offsetLeft + 50 + "px";
   clearTimeout(timer);
   
   //阻止事件冒泡
   oSubNav.onmouseover = function (event)
   {
    (event || window.event).cancelBubble = true;
    clearTimeout(timer)
   }
  };
  
  aLi[i].onmouseout = function ()
  {
   timer = setTimeout(function () {
    oSubNav.style.display = "none"
   },300) 
  }
 }
};
</script>
<div id="nav">
    <ul>
        <li><a href="http://www.internetke.com" target="_blank">阿里西西</a></li>
        <li>
            <a href="http://www.internetke.com" target="_blank">网页特效</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="http://www.internetke.com" target="_blank">业界动态</a>|
                        <a href="http://www.internetke.com" target="_blank">收购融资</a>|
                        <a href="http://www.internetke.com" target="_blank">门户动态</a>|
                        <a href="http://www.internetke.com" target="_blank">搜索引擎</a>|
                        <a href="http://www.internetke.com" target="_blank">网络游戏</a>|
                        <a href="http://www.internetke.com" target="_blank">电子商务</a>|
                        <a href="http://www.internetke.com" target="_blank">广告传媒</a>|
                        <a href="http://www.internetke.com" target="_blank">厂商开发</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="http://www.internetke.com" target="_blank">站长在线</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="http://www.internetke.com" target="_blank">站长报道</a>|
                        <a href="http://www.internetke.com" target="_blank">好站推荐</a>|
                        <a href="http://www.internetke.com" target="_blank">站长聚会</a>|
                        <a href="http://www.internetke.com" target="_blank">站长访谈</a>|
                        <a href="http://www.internetke.com" target="_blank">站长茶馆</a>|
                        <a href="http://www.internetke.com" target="_blank">网站排行</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="http://www.internetke.com" target="_blank">网站运营</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="http://www.internetke.com" target="_blank">建站经验</a>|
                        <a href="http://www.internetke.com" target="_blank">策划盈利</a>|
                        <a href="http://www.internetke.com" target="_blank">搜索优化</a>|
                        <a href="http://www.internetke.com" target="_blank">网站推广</a>|
                        <a href="http://www.internetke.com" target="_blank">免费资源</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="http://www.internetke.com" target="_blank">设计在线</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="http://www.internetke.com" target="_blank">酷站推荐</a>|
                        <a href="http://www.internetke.com" target="_blank">网页设计</a>|
                        <a href="http://www.internetke.com" target="_blank">WEB标准</a>|
                        <a href="http://www.internetke.com" target="_blank">视频处理</a>|
                        <a href="http://www.internetke.com" target="_blank">设计活动</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="http://www.internetke.com" target="_blank">网络编程</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="http://www.internetke.com" target="_blank">Asp编程</a>|
                        <a href="http://www.internetke.com" target="_blank">Php编程</a>|
                        <a href="http://www.internetke.com" target="_blank">.Net编程</a>|
                        <a href="http://www.internetke.com" target="_blank">Xml编程</a>|
                        <a href="http://www.internetke.com" target="_blank">Access</a>|
                        <a href="http://www.internetke.com" target="_blank">Mssql</a>|
                        <a href="http://www.internetke.com" target="_blank">Mysql</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="http://www.internetke.com" target="_blank">联盟资讯</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="http://www.internetke.com" target="_blank">联盟动态</a>|
                        <a href="http://www.internetke.com" target="_blank">联盟介绍</a>|
                        <a href="http://www.internetke.com" target="_blank">联盟点评</a>|
                        <a href="http://www.internetke.com" target="_blank">网赚技巧</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="http://www.internetke.com" target="_blank">服务器</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="http://www.internetke.com" target="_blank">Web服务器</a>|
                        <a href="http://www.internetke.com" target="_blank">Ftp服务器</a>|
                        <a href="http://www.internetke.com" target="_blank">Mail服务器</a>|
                        <a href="http://www.internetke.com" target="_blank">Dns服务器</a>|
                        <a href="http://www.internetke.com" target="_blank">Win服务器</a>|
                        <a href="http://www.internetke.com" target="_blank">Linux服务器</a>|
                        <a href="http://www.internetke.com" target="_blank">安全防护</a>|
                        <a href="http://www.internetke.com" target="_blank">虚拟主机</a>
                    </span>
                </p>
            </div>
        </li>        
    </ul>    
</div>
<!--效果html结束-->
</div>
<div class="keBottom">
<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>
<p class="keTxtP">本站导航：
<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> | 
<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> | 
<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> | 
<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> | 
<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> | 
<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> | 
<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
<!--广告代码开始-->
<div style="text-align:center"><script src='/plus/ad_js.php?aid=22' language='javascript'></script></div>
<!--广告代码结束-->
</body>
</html>
运行代码保存代码收藏分享评论提示：您可以先修改部分代码再运行。
特效说明：
一款JS导航带横向二级菜单网页特效，自适应横向二级菜单，二级菜单自动判断向左向右对齐方式。比较适用的一款导航网页特效。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）
标签菜单特效导航特效
JS采用VUE制作无限极树形结构菜单展开收缩代码

2019-04-12
HTML5绘制动态线条像素背景动画特效

2019-04-12
jQuery网页视频在线播放器代码

2019-04-12
HTML5科幻空间动画背景网页特效

2019-04-12
jQuery滑动验证解锁插件slideunlock.js

2019-04-10
JS导航带横向二级菜单网页特效

分类导航

最新更新特效

JS采用VUE制作无限极树形结构菜单展开收缩代码

HTML5绘制动态线条像素背景动画特效

jQuery网页视频在线播放器代码

HTML5科幻空间动画背景网页特效

jQuery滑动验证解锁插件slideunlock.js
