7顶

站长之家chinaz.com网站导航代码

稿源：互联网 2022-04-02 21:38:20 点击： 16646 撤稿纠错

站长之家chinaz.com网站的二级菜单显示隐藏的效果

以下讨论的是和站长之家网站导航相关的站长之家chinaz.com网站导航代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>setTimeout应用 特效演示 by js.alixixi.com</title>
<style>
body,div,ul,li,p{margin:0;padding:0;}
body{font:12px/1.5 Arial;}
ul{list-style-type:none;}
#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://js.fgm.cc/learn/lesson4/img/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;}
</style>
<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>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="http://www.alixixi.com">阿里西西</a></li>
        <li>
            <a href="http://js.alixixi.com">网页特效</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="javascript:;">业界动态</a>|
                        <a href="javascript:;">收购融资</a>|
                        <a href="javascript:;">门户动态</a>|
                        <a href="javascript:;">搜索引擎</a>|
                        <a href="javascript:;">网络游戏</a>|
                        <a href="javascript:;">电子商务</a>|
                        <a href="javascript:;">广告传媒</a>|
                        <a href="javascript:;">厂商开发</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">站长在线</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="javascript:;">站长报道</a>|
                        <a href="javascript:;">好站推荐</a>|
                        <a href="javascript:;">站长聚会</a>|
                        <a href="javascript:;">站长访谈</a>|
                        <a href="javascript:;">站长茶馆</a>|
                        <a href="javascript:;">网站排行</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">网站运营</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="javascript:;">建站经验</a>|
                        <a href="javascript:;">策划盈利</a>|
                        <a href="javascript:;">搜索优化</a>|
                        <a href="javascript:;">网站推广</a>|
                        <a href="javascript:;">免费资源</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">设计在线</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="javascript:;">酷站推荐</a>|
                        <a href="javascript:;">网页设计</a>|
                        <a href="javascript:;">WEB标准</a>|
                        <a href="javascript:;">视频处理</a>|
                        <a href="javascript:;">设计活动</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">网络编程</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="javascript:;">Asp编程</a>|
                        <a href="javascript:;">Php编程</a>|
                        <a href="javascript:;">.Net编程</a>|
                        <a href="javascript:;">Xml编程</a>|
                        <a href="javascript:;">Access</a>|
                        <a href="javascript:;">Mssql</a>|
                        <a href="javascript:;">Mysql</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">联盟资讯</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="javascript:;">联盟动态</a>|
                        <a href="javascript:;">联盟介绍</a>|
                        <a href="javascript:;">联盟点评</a>|
                        <a href="javascript:;">网赚技巧</a>
                    </span>
                </p>
            </div>
        </li>
        <li>
            <a href="javascript:;">服务器</a>
            <div class="subnav">
                <em class="arrow"></em>
                <p>         
                    <span>
                        <a href="javascript:;">Web服务器</a>|
                        <a href="javascript:;">Ftp服务器</a>|
                        <a href="javascript:;">Mail服务器</a>|
                        <a href="javascript:;">Dns服务器</a>|
                        <a href="javascript:;">Win服务器</a>|
                        <a href="javascript:;">Linux服务器</a>|
                        <a href="javascript:;">安全防护</a>|
                        <a href="javascript:;">虚拟主机</a>
                    </span>
                </p>
            </div>
        </li>        
    </ul>    
</div>
</body>
</html>

关于站长之家chinaz.com网站导航代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011102075608.shtml方便下次再访问哦。

·上一篇： 模拟计算器的退格键删除文字效果
·下一篇： 单纯的CSS3横向评分柱状动画效果

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

站长之家chinaz.com网站导航代码

文章分类LIST >>返回首页

最新游戏

最新新闻