尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    企业栏目菜单无限扩展菜单 兼容 ie ff opera

    作者:hi379  来源:hi379  发表时间:2009-8-14 8:34:35  点击:3300

    企业栏目菜单无限扩展菜单 兼容 ie ff opera,基本完美。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=gb2312" />
    <meta http-equiv="content-language" content="zh-cn" />
    <meta name="robots" content="all" />
    <meta name="keywords" content="关键字描述" />
    <meta name="description" content="站点描述" />
    <meta name="author" content="宇,zy.e@163.com" />
    <meta name="copyright" content="版权所有" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="bookmark" href="/favicon.ico" type="image/x-icon" />
    <title></title>
    <style type="text/css">
    <!--
    *{margin:0;padding:0;}
    img{border:0;}
    body{font:12px/130% verdana,geneva,arial,helvetica,sans-serif,宋体;}li{list-style:none;}
    .clearfix:after{content:"&nbsp;";display:block;height:0;clear:both;visibility:hidden;}.clearfix{*display:inline-block;}
    a:link{ color:#000; text-decoration:none; }
    a:visited{ color:#000; text-decoration:none; }
    a:hover{ color:#000; text-decoration:underline; }
    .menubg{ background: url(http://home.blueidea.com/attachment/200908/13/285026_1250155294g9FX.png) 0 -90px ; height: 29px;}
    .menu{ width: 920px; margin: auto;}
    .menusel{ float:left;width:131px; position:relative; height:29px; line-height:29px; *line-height: 30px;}
    .menusel h2{height:29px; font-family:"microsoft yahei"; position: relative; z-index: 9;}
    .menusel h2 a:link,.menusel h2 a:visited{ font-weight: 400; font-size: 14px; color: #fff;}
    .menusel h2 a:hover{ text-decoration: none;}
    .menusel a:link,.menusel a:visited{ width:131px; display: block; text-align:center; font-size: 14px;font-family:"microsoft yahei"; position:relative; z-index:2;}
    .menusel a:hover{ position:relative; z-index:2; height:25px;}
    .menusel div{ width:131px;position:absolute; z-index:1;margin-top: -1px;}
    .menusel ul{ width:131px; background:#356290; border:1px solid #2b5076;border-top:1px solid #356290;margin-top:0; position:relative; z-index:1; display:none;}
    .menusel .block{ display:block;}
    .menusel ul li{border-bottom:1px dashed #658fbc; position:relative; float:left; height: 26px;}
    .menusel ul li a{ border:none;}
    .menusel ul li a:link,.menusel ul li a:visited,.typeul li a:visited{font-size: 12px;height: 26px; color: #fff;}
    .menusel ul li a:hover{background:#2b4e73;font-size: 14px; color: #fff;height: 26px;line-height: 26px;}
    .menusel ul{  margin-left:0;  }
    .menusel ul li ul{left:131px; top:-1px; position:absolute;}
    .menusel .lli{ border:none; }
    .h2hover{ background: url(http://home.blueidea.com/attachment/200908/13/285026_1250155294kip2.png) center no-repeat;height: 26px;}
    .h2hover a:link,.h2hover a:visited{ color: black!important ;}
    -->
    </style>
    </head>
    <body>
    <div class="menubg">
    <div class="menu">
    <div id="menu1" class="menusel">
    <h2><a href="index.html">我是菜单1</a></h2>
    <div>
    <ul>
    <li><a href="">选 项</a></li>
    <li><a href="">扩 展 测 试</a><ul>
    <li><a href="">无 限 扩 展</a></li>
    <li><a href="">无 限 扩 展</a><ul>
    <li><a href="">无 限 扩 展</a></li>
    <li><a href="">无 限 扩 展</a><ul>
    <li><a href="">无 限 扩 展</a></li>
    <li><a href="">无 限 扩 展</a><ul>
    <li><a href="">无 限 扩 展</a></li>
    </ul></li>
    </ul></li>
    <li><a href="">无 限 扩 展</a></li>
    </ul></li>
    <li><a href="">无 限 扩 展</a></li>
    <li><a href="">无 限 扩 展</a></li>
    </ul></li>
    <li><a href="">选 项</a></li>
    <li><a href="">选 项</a></li>
    <li><a href="">选 项</a></li>
    </ul>
    </div><!-- position -->
    </div><!-- menu1 -->
    <div id="menu2" class="menusel">
    <h2><a href="business.html">我是菜单2</a></h2>
    <div>
    <ul>
    <li><a href="">游戏业务部</a></li>
    <li><a href="">游戏开发组</a></li>
    <li><a href="">游戏事业部</a></li>
    <li><a href="">海外事业部</a></li>
    </ul>
    </div><!-- position -->
    </div><!-- menu2 -->
    <div id="menu3" class="menusel">
    <h2><a href="cooperation.html">我是菜单3</a></h2>
    <div>
    <ul>
    <li><a href="">商业技术合作</a></li>
    <li><a href="">网 站 合 作</a></li>
    <li><a href="">客户服务中心</a></li>
    </ul>
    </div><!-- position -->
    </div><!-- menu3 -->
    <div id="menu4" class="menusel">
    <h2><a href="news.html">我是菜单4</a></h2>
    <div>
    <ul>
    <li><a href="">公 司 动 态</a></li>
    <li><a href="">发 展 历 程</a></li>
    <li><a href="">开 发 进 度</a></li>
    <li><a href="">其 他 新 闻</a></li>
    </ul>
    </div><!-- position -->
    </div><!-- menu4 -->
    <div id="menu5" class="menusel">
    <h2><a href="culture.html">我是菜单5</a></h2>
    <div>
    <ul>
    <li><a href="">我们的憬愿</a></li>
    <li><a href="">品 牌 战 略</a></li>
    <li><a href="">公 司 标 志</a></li>
    </ul>
    </div><!-- position -->
    </div><!-- menu5 -->
    <div id="menu6" class="menusel">
    <h2><a href="recruitment.html">我是菜单6</a></h2>
    <div>
    <ul>
    <li><a href="">社 会 招 聘</a></li>
    <li><a href="">校 园 招 聘</a></li>
    <li><a href="">现 场 招 聘</a></li>
    <li><a href="">投 递 简 历</a></li>
    </ul>
    </div><!-- position -->
    </div><!-- menu6 -->
    <div id="menu7" class="menusel">
    <h2><a href="services.html">我是菜单7</a></h2>
    <div>
    <ul>
    <li><a href="">网站客户服务</a></li>
    <li><a href="">游戏客户服务</a></li>
    </ul>
    </div><!-- position -->
    </div><!-- menu7 -->
    </div><!-- menu -->
    </div><!-- menubg -->
    <script type="text/javascript">
    for(var x = 1; x < 8; x++)
    {
     var menuid = document.getElementById("menu"+x);
     type();
    }
    function type()
    {
     var menuh2 = menuid.getElementsByTagName("h2");
     var divs = menuid.getElementsByTagName("div");
     var alluls = divs[0].getElementsByTagName("ul");
     var menuli = alluls[0].getElementsByTagName("li");
     menuh2[0].onmouseover = show;
     menuh2[0].onmouseout = unshow;
     alluls[0].onmouseover = show;
     alluls[0].onmouseout = unshow;
     
     function show()
     {
     alluls[0].className = "clearfix block"
     /*menuul[0].lastChild.className = "lli";*/
     function getChildRen(x)
     {
      var arry = new Array;
      var c = x.childNodes;
      for (var i = 0; i < c.length; i++)
       {
        if (c[i].nodeType == 1)
        {
         arry.push(c[i])
        }
       }
      return arry;
     }
     
     for(var i = 0; i < alluls.length; i++)
     {
      var ok = getChildRen(alluls[i]);
      ok[ok.length-1].className = "lli";
     }
     /*alert(alluls[0].offsetHeight)*/
     menuh2[0].className = "h2hover"
     }
     
     function unshow()
     {
     alluls[0].className = ""
     menuh2[0].className = ""
     }
     
     for(var i = 0; i < menuli.length; i++)
      {
       menuli[i].num = i;
       var liul = menuli[i].getElementsByTagName("ul")[0];
        if(liul)
        {
         typeshow()
        }
      }
     
     function typeshow()
     {
      menuli[i].onmouseover = showul;
      menuli[i].onmouseout = unshowul;
     }
     
     function showul()
     {
      menuli[this.num].getElementsByTagName("ul")[0].className = "block";
      menuli[this.num].getElementsByTagName("ul")[0].lastChild.className ="lli";
     }
     
     function unshowul()
     {
      menuli[this.num].getElementsByTagName("ul")[0].className = "";
     }
    }
    </script>
    </body>
    </html>

    很酷的导航菜单,分享给大家。

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗