• JS特效 http://www.it165.net/js/
  • 火箭网彩票官网

    發布日期︰2020-02-19 09:12:00

      我們在(zai)對菜(cai)單導(dao)航(hang)的設置和應用時bao) 釔匠5牟cai)單導(dao)航(hang)就是豎直(zhi)的平面圖,但(dan)是有時候(hou)如果界面的東(dong)西太多或者(zhe)我們的欄(lan)目(mu)太多就必須將(jiang)我們的菜(cai)單簡(jian)單的設置和設計,將(jiang)它盡可能的設置成能夠huan)獎bian)我們的搜索和尋(xun)找而(er)且(qie)還(huai)可以壓縮內容。

    <style type="text/css">
    <!--
    *{margin:0;padding:0;border:0;}
    body {
     font-family: arial, 宋體, serif;
     font-size:12px;
    }
    #nav {
     width:180px;
        line-height: 24px;
     list-style-type: none;
     text-align:left;
        /*定(ding)義整個ul菜(cai)單的行(xing)高和背(bei)景(jing)色*/
    }
    /*==================一級目(mu)錄(lu)===================*/
    #nav a {
     width: 160px;
     display: block;
     padding-left:20px;
     /*Width(一定(ding)要),否則下面的Li會變形*/
    }
    #nav li {
     background:#CCC; /*一級目(mu)錄(lu)的背(bei)景(jing)色*/
     border-bottom:#FFF 1px solid; /*下面的一條白邊*/
     float:left;
     /*float︰left,本不應該設置,但(dan)由于在(zai)Firefox不能正(zheng)常顯示
     繼(ji)承Nav的width,限制(zhi)寬度,li自(zi)動(dong)向下延伸*/
    }
    #nav li a:hover{
     background:#CC0000; /*一級目(mu)錄(lu)onMouseOver顯示的背(bei)景(jing)色*/
    }
    #nav a:link  {
     color:#666; text-decoration:none;
    }
    #nav a:visited  {
     color:#666;text-decoration:none;
    }
    #nav a:hover  {
     color:#FFF;text-decoration:none;font-weight:bold;
    }
    /*==================二級目(mu)錄(lu)===================*/
    #nav li ul {
     list-style:none;
     text-align:left;
    }
    #nav li ul li{
     background: #EBEBEB; /*二級目(mu)錄(lu)的背(bei)景(jing)色*/
    }
    #nav li ul a{
             padding-left:20px;
             width:160px;
     /* padding-left二級目(mu)錄(lu)中文字向右(you)移動(dong),但(dan)Width必須重新(xin)設置=(總寬度-padding-left)*/
    }
    /*下面是qian)賭mu)錄(lu)的鏈接樣式*/
    #nav li ul a:link  {
     color:#666; text-decoration:none;
    }
    #nav li ul a:visited  {
     color:#666;text-decoration:none;
    }
    #nav li ul a:hover {
     color:#F3F3F3;
     text-decoration:none;
     font-weight:normal;
     background:#CC0000;
     /* 二級onmouseover的字體顏色、背(bei)景(jing)色*/
    }
    /*==============================*/
    #nav li:hover ul {
     left: auto;
    }
    #nav li.sfhover ul {
     left: auto;
    }
    #content {
     clear: left;
    }
    #nav ul.collapsed {
     display: none;
    }
    -->
    #PARENT{
     width:300px;
     padding-left:20px;
    }
    </style>
    <div id="PARENT">
    <ul id="nav">
    <li><a href="#Menu=ChildMenu1"  onclick="DoMenu('ChildMenu1')">我的網(wang)站</a>
     <ul id="ChildMenu1" class="collapsed">
     <li><a href="#">網(wang)頁教學網(wang)</a></li>
     <li><a href="#">管理</a></li>
     <li><a href="#">網(wang)頁教學網(wang)</a></li>
     <li><a href="#">管理</a></li>
     <li><a href="#">網(wang)頁教學網(wang)</a></li>
     <li><a href="#">管理</a></li>
     </ul>
    </li>
    <li><a href="#Menu=ChildMenu2" onclick="DoMenu('ChildMenu2')">我的帳務</a>
     <ul id="ChildMenu2" class="collapsed">
     <li><a href="#">支付</a></li>
     <li><a href="#">管理</a></li>
     <li><a href="#">網(wang)上支付</a></li>
     <li><a href="#">登記匯款</a></li>
     <li><a href="#">在(zai)線招領(ling)</a></li>
     <li><a href="#">歷史帳務</a></li>
     </ul>
    </li>
    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網(wang)上視頻教程</a>
     <ul id="ChildMenu3" class="collapsed">
     <li><a href="#">Photoshop</a></li>
     <a href="#">Java</a></li>
     <li><a href="#">Asp</a></li>
     <li><a href="#">Javascript</a></li>
     </ul>
    網(wang)絡
    </li>
    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">在(zai)線課程</a>
     <ul id="ChildMenu4" class="collapsed">
     <li><a href="#">C語言(yan)</a></li>
     <a href="#">JAVA語言(yan)</a></li>
     <li><a href="#">SQL</a></li>
     <li><a href="#">C#</a></li>
     <li><a href="#">VB</a></li>
     </ul>
    </li>
    </ul>
    </div>
    <script type=text/javascript><!--
    var LastLeftID = "";
    function menuFix() {
     var obj = document.getElementById("nav").getElementsByTagName("li");
     
     for (var i=0; i<obj.length; i++) {
      obj[i].onmouseover=function() {
       this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
      obj[i].onMouseDown=function() {
       this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
      obj[i].onMouseUp=function() {
       this.className+=(this.className.length>0? " ": "") + "sfhover";
      }
      obj[i].onmouseout=function() {
       this.className=this.className.replace(new RegExp("( ?^)sfhover//b"), "");
      }
     }
    }
    function DoMenu(emid)
    {
     var obj = document.getElementById(emid);
     obj.className = (obj.className.toLowerCase() == "expanded"?"collapsed":"expanded");
     if((LastLeftID!="")&&(emid!=LastLeftID)) //關閉上一個Menu
     {
      document.getElementById(LastLeftID).className = "collapsed";
     }
     LastLeftID = emid;
    }
    function GetMenuID()
    {
     var MenuID="";
     var _paramStr = new String(window.location.href);
     var _sharpPos = _paramStr.indexOf("#");
     
     if (_sharpPos >= 0 && _sharpPos < _paramStr.length - 1)
     {
      _paramStr = _paramStr.substring(_sharpPos + 1, _paramStr.length);
     }
     else
     {
      _paramStr = "";
     }
     
     if (_paramStr.length > 0)
     {
      var _paramArr = _paramStr.split("&");
      if (_paramArr.length>0)
      {
       var _paramKeyVal = _paramArr[0].split("=");
       if (_paramKeyVal.length>0)
       {
        MenuID = _paramKeyVal[1];
       }
      }
      /*
      if (_paramArr.length>0)
      {
       var _arr = new Array(_paramArr.length);
      }
     
      //取所有#後面的mo) cai)單只需用到Menu
      //for (var i = 0; i < _paramArr.length; i++)
      {
       var _paramKeyVal = _paramArr[i].split('=');
      
       if (_paramKeyVal.length>0)
       {
        _arr[_paramKeyVal[0]] = _paramKeyVal[1];
       } 
      }
      */
     }
     
     if(MenuID!="")
     {
      DoMenu(MenuID)
     }
    }
    GetMenuID(); //*這兩個function的順序要注意(yi)一下,不然在(zai)Firefox里(li)GetMenuID()不起效果
    menuFix();
    --></script>
      菜(cai)單導(dao)航(hang)的應用基本上每個網(wang)友界面我們qian)薊嶠jiang)它設置,但(dan)是每個網(wang)頁的的界面不同而(er)且(qie)欄(lan)目(mu)多少也不太同,所以我們在(zai)面對問題(ti)時要對癥下藥該是什麼就是什麼,我們必須根據正(zheng)確(que)的環(huan)境(jing)而(er)下對策。
    • 火箭网彩票官网

    次元(yuan)立方 -廣告服務 -隱私聲明(ming) -版權申明(ming) -免(mian)責條款 -網(wang)站地圖 -網(wang)友投稿 -聯系方式
    本站內容來自(zi)于互聯網(wang),僅供用于網(wang)絡技術(shu)學習,學習中請(qing)遵循相(xiang)關法律法規(gui)
    火箭网彩票官网 | 下一页