• JS特效 http://www.bjxfcs.com/js/
  • 關于JS特效代碼設置應用折疊式菜單導航

    發布日期:2019-01-30 08:31:00

      我們在對菜單導航的設置和應用時,最平常的菜單導航就是豎直的平面圖,但是有時候如果界面的東西太多或者我們的欄目太多就必須將我們的菜單簡單的設置和設計,將它盡可能的設置成能夠方便我們的搜索和尋找而且還可以壓縮內容。

    <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;
        /*定義整個ul菜單的行高和背景色*/
    }
    /*==================一級目錄===================*/
    #nav a {
     width: 160px;
     display: block;
     padding-left:20px;
     /*Width(一定要),否則下面的Li會變形*/
    }
    #nav li {
     background:#CCC; /*一級目錄的背景色*/
     border-bottom:#FFF 1px solid; /*下面的一條白邊*/
     float:left;
     /*float:left,本不應該設置,但由于在Firefox不能正常顯示
     繼承Nav的width,限制寬度,li自動向下延伸*/
    }
    #nav li a:hover{
     background:#CC0000; /*一級目錄onMouseOver顯示的背景色*/
    }
    #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;
    }
    /*==================二級目錄===================*/
    #nav li ul {
     list-style:none;
     text-align:left;
    }
    #nav li ul li{
     background: #EBEBEB; /*二級目錄的背景色*/
    }
    #nav li ul a{
             padding-left:20px;
             width:160px;
     /* padding-left二級目錄中文字向右移動,但Width必須重新設置=(總寬度-padding-left)*/
    }
    /*下面是二級目錄的鏈接樣式*/
    #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的字體顏色、背景色*/
    }
    /*==============================*/
    #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')">我的網站</a>
     <ul id="ChildMenu1" class="collapsed">
     <li><a href="#">網頁教學網</a></li>
     <li><a href="#">管理</a></li>
     <li><a href="#">網頁教學網</a></li>
     <li><a href="#">管理</a></li>
     <li><a href="#">網頁教學網</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="#">網上支付</a></li>
     <li><a href="#">登記匯款</a></li>
     <li><a href="#">在線招領</a></li>
     <li><a href="#">歷史帳務</a></li>
     </ul>
    </li>
    <li><a href="#Menu=ChildMenu3" onclick="DoMenu('ChildMenu3')">網上視頻教程</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>
    網絡
    </li>
    <li><a href="#Menu=ChildMenu4" onclick="DoMenu('ChildMenu4')">在線課程</a>
     <ul id="ChildMenu4" class="collapsed">
     <li><a href="#">C語言</a></li>
     <a href="#">JAVA語言</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);
      }
     
      //取所有#后面的,菜單只需用到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的順序要注意一下,不然在Firefox里GetMenuID()不起效果
    menuFix();
    --></script>
      菜單導航的應用基本上每個網友界面我們都會將它設置,但是每個網頁的的界面不同而且欄目多少也不太同,所以我們在面對問題時要對癥下藥該是什么就是什么,我們必須根據正確的環境而下對策。
    • 專題推薦

    次元立方 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
    本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
    香港最快开奖现场直播结果