• JS特效 http://www.vipfdzs189.pw/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>
      菜单导航的应用基本上每个网友界面我们都会将它设置,但是每个网页的的界面不同而且栏目多少也不太同,所以我们在面对问题时要对症下药该是什么就是什么,我们必须根据正确的环境而下对策。
    • 专题推荐

    次元立方 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
    本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规
    易中彩票注册 664| 274| 577| 331| 115| 514| 568| 169| 259| 763| 673| 655| 502| 724| 16| 955| 67| 559| 394| 811| 31| 790| 34| 313| 487| 421| 109| 556| 757| 307|