您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 导航菜单 >

    二级横向蓝色+白色背景两级菜单条

    时间:2014-03-20 08:43 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印
    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    • 十分清新的多级网页菜单,类似滑动门的操作风格,鼠标放上后,相应的二级菜单会显示出来,我觉得挺漂亮的,适合许多网站使用,不相信么?点击“运行代码”看效果吧。
    • <!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">
      <TITLE>蓝色二级横向滑动导航菜单</TITLE>
      <style type=text/css>
      UL {
      LIST-STYLE-TYPE: none;
      padding:0px;
      margin:0px;
      }
      LI {
      FONT-SIZE: 12px;
      COLOR: #333;
      LINE-HEIGHT: 1.5em;
      FONT-FAMILY: "微软雅黑", Arial, Verdana;
      }
      .hide {
      DISPLAY: none
      }
      #mainmenu_top UL LI .menuhover {
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/mainmenu_s.gif) no-repeat;
      COLOR: #fff;
      }
      #mainmenu_top UL LI A {
      MARGIN-TOP: 2px;
      CURSOR: pointer;
      PADDING-TOP: 8px;
      HEIGHT: 20px;
      text-decoration: none;
      }
      #mainmenu_top {
      width:100%;
      HEIGHT: 28px;
      display:block;
      overflow:hidden;
      }
      #mainmenu_top UL LI {FLOAT: left}
      #mainmenu_top UL LI A {
        WIDTH: 81px;
      height:auto;
      DISPLAY: block;
      COLOR: #666666;
      TEXT-ALIGN: center;
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/mainmenu_h.gif) no-repeat;
      }
      #mainmenu_bottom {
      width:100%;
      height:32px;
      line-height:32px;
      display:block;
      overflow:hidden;
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/mainmenu_bg.jpg) repeat-x
      }
      #mainmenu_bottom .mainmenu_rbg {
      HEIGHT: 32px;
      COLOR: #fff;
      MARGIN-LEFT: 0px;
      PADDING: 0px 0px 0px 5px;
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/mainmenu_r.gif) no-repeat right 50%;
      }
      #mainmenu_bottom UL {}
      #mainmenu_bottom UL LI {
      PADDING-LEFT: 8px;
      FLOAT: left;
      MARGIN-LEFT: 7px;
      HEIGHT: 32px;
      }
      #mainmenu_bottom UL LI.se {
      FLOAT: left;
      MARGIN-LEFT: 7px;
      HEIGHT: 32px;
      PADDING-LEFT: 8px;
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/menulink_bg_l.gif) no-repeat;
      }
      #mainmenu_bottom UL LI A {
      COLOR: #fff;
      LINE-HEIGHT: 32px;
      PADDING-RIGHT: 18px;
      DISPLAY: block;
      text-decoration: none;
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/menulink_bg_normal.gif) no-repeat right 50%;
      }
      #mainmenu_bottom UL LI A:hover {
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/menulink_bg_normal.gif) no-repeat right 50%;
      color: #FFCC00;
      }
      #mainmenu_bottom UL LI A.se {
      COLOR: #fff;
      LINE-HEIGHT: 32px;
      PADDING-RIGHT: 18px;
      DISPLAY: block;
      BACKGROUND: url(http://www.codefans.net/jscss/demoimg/201403/menulink_bg_r.gif) no-repeat right 50%;
      }
      </style>
      <SCRIPT type=text/javascript>
      var waitting = 1;
      var secondLeft = waitting;
      var timer;
      var sourceObj;
      var number;
      function getObject(objectId)//获取id的函数
          {
              if(document.getElementById && document.getElementById(objectId)) {
              // W3C DOM
              return document.getElementById(objectId);
              } else if (document.all && document.all(objectId)) {
              // MSIE 4 DOM
              return document.all(objectId);
              } else if (document.layers && document.layers[objectId]) {
              // NN 4 DOM.. note: this won't find nested layers
              return document.layers[objectId];
              } else {
              return false;
              }
          }
      function SetTimer()//主导航时间延迟的函数
          {
              for(j=1; j <10; j++){
                  if (j == number){
                      if(getObject("mm"+j)!=false){
                          getObject("mm"+ number).className = "menuhover";
                          getObject("mb"+ number).className = "";
                      }
                  }
                  else{
                       if(getObject("mm"+j)!=false){
                          getObject("mm"+ j).className = "";
                          getObject("mb"+ j).className = "hide";
                      }
                  }
              }
          }
      function CheckTime()//设置时间延迟后
          {
              secondLeft--;
              if ( secondLeft == 0 )
              {
              clearInterval(timer);
              SetTimer();
              }
          }
      function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
          {
              number = Num;
              sourceObj = thisobj;
              secondLeft = 1;
              timer = setTimeout('CheckTime()',100);
          }
      function OnMouseLeft()//主导航鼠标移出函数,清除时间函数
          {
              clearInterval(timer);
          }    
      function mmenuURL()//主导航、二级导航显示函数
      {
      var thisURL = document.URL;
      tmpUPage = thisURL.split( "/" );
      thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
      thisUPage_s= thisUPage_s.toLowerCase();//小写
      if(thisUPage_s=="test.hichina.com"||thisUPage_s=="www.net.cn"||thisUPage_s=="www.hichina.com")
      {
      getObject("mm1").className="menuhover"
      getObject("mb1").className = "";
      }
      else if(thisUPage_s=="domain")
      {
      getObject("mm2").className="menuhover"
      getObject("mb2").className = "";
      }
      else if(thisUPage_s=="hosting")
      {
      getObject("mm3").className="menuhover"
      getObject("mb3").className = "";
      }
      else if(thisUPage_s=="mail")
      {
      getObject("mm4").className="menuhover"
      getObject("mb4").className = "";
      }
      else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
      getObject("mm5").className="menuhover"
      getObject("mb5").className = "";
      }
      else if(thisUPage_s=="promotion"){
      getObject("mm6").className="menuhover"
      getObject("mb6").className = "";
      }
      else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
      getObject("mm7").className="menuhover"
      getObject("mb7").className = "";
      }
      else if(thisUPage_s=="benefit"){
      getObject("mm8").className="menuhover"
      getObject("mb8").className = "";
      }
      else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
      getObject("mm9").className="menuhover"
      getObject("mb9").className = "";
      }
      else
      {
      getObject("mm1").className="";
      getObject("mb1").className = "";
      }
      }
      window.load=mmenuURL()
      </SCRIPT>
      <!--导航开始-->
      <DIV id=mainmenu_body>
      <!--主导航开始-->
          <DIV id=mainmenu_top>
              <UL>
              <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="/" target=_parent>网站首页</A> </LI>
              <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="/" target=_parent>JS代码</A> </LI>
              <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="/" target=_parent>电子商务</A> </LI>
              <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="/" target=_parent>源码下载</A> </LI>
              <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="/" target=_parent>建站技巧</A> </LI>
              <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="/" target=_parent>CSS技巧</A> </LI>
              <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="/" target=_parent>CSS导航菜单</A> </LI>
              <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="/" target=_parent>菜单特效</A> </LI>
              <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="/" target=_parent>SEO优化</A> </LI></UL>
          </DIV>
      <!--子导航导航开始-->
          <DIV id=mainmenu_bottom>
              <DIV class=mainmenu_rbg>
                  <UL class=hide id=mb1>
                  <LI><A href="/">源码下载-中小企业菜单特效专家</A> </LI>
                  <LI><A href="/">网站公告:源码下载欢迎您~</A> </LI>
      </UL>
                  <UL class=hide id=mb2>
                  <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
                  <UL class=hide id=mb3>
                  <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
                  <UL class=hide id=mb4>
                  <LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
                  <UL class=hide id=mb5>
                  <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>超级机房</A> </LI>
                  <LI><A href="#" target=_parent>源码下载</A> </LI></UL>
                  <UL class=hide id=mb6>
                  <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>源码下载</A> </LI></UL>
                  <UL class=hide id=mb7>
                  <LI style="DISPLAY: none"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>个人建站</A> </LI>
                  <LI><A href="#" target=_parent>门户建站</A> </LI></UL>
                  <UL class=hide id=mb8 style="DISPLAY: none">
                  <LI style="MARGIN-LEFT: 270px"><A href="/agent/" target=_parent>源码下载</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
                  <UL class=hide id=mb9>
                  <LI style="MARGIN-LEFT: 180px"><A href="/agent/">源码下载</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI>
                  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
              </DIV>
          </DIV>
      </DIV>
      </body>
      </html>
    二级横向蓝色+白色背景两级菜单条由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/7006.html
    标签:网站源码