• 简单实现点击可展开、关闭的CSS竖向菜单


    <html>
    <head>
    <title></title>
    <style type="text/css">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#eeeeee;
    188px;
    padding:2px;
    text-align:center;
    font-weight:bold;
    }
    .submenu{
    margin-bottom: 0.5em;
    }
    </style>
    <script type="text/javascript">
    if (document.getElementById){ //http://www.codefans.net
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }

    function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
     if(el.style.display != "block"){ //DynamicDrive.com change
      for (var i=0; i<ar.length; i++){
     if (ar[i].className=="submenu") //DynamicDrive.com change
       ar[i].style.display = "none";
      }
      el.style.display = "block";
     }else{
     el.style.display = "none";
     }
     }
    }
    </script>
    </head>
    <body>
    <!-- Codes by http://www.codefans.net-->
    <div id="masterdiv">
     <div class="menutitle" onclick="SwitchMenu('sub1')">CodeFans.net's Menu</div>
     <span class="submenu" id="sub1">
      - <a href="http://www.codefans.net">CodeFans.NET</a>
      - <a href="http://www.codefans.net">What's hot</a>
      - <a href="http://www.codefans.net">CodeFans.NET</a>
      - <a href="http://www.codefans.net">More Zone</a>
     </span>
     <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
     <span class="submenu" id="sub2">
      - <a href="http://www.codefans.net">CodeFans.NET</a>
      - <a href="http://www.codefans.net">DHTML FAQs</a>
      - <a href="http://www.codefans.net">Scripts FAQs</a>
     </span>
     <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
     <span class="submenu" id="sub3">
      - <a href="http://www.codingforums.com">Coding Forums</a>
     </span>
     <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
     <span class="submenu" id="sub4">
      - <a href="http://codefans.net">JavaScript Kit</a>
      - <a href="http://codefans.net">CodeFans.NET</a>
      - <a href="http://codefans.net">Cool Text</a>
      - <a href="http://codefans.net">CodeFans.NET</a>
     </span>
     <img src="http://www.codefans.net/images/logo.gif" onclick="SwitchMenu('sub6')">

     <span class="submenu" id="sub6">
      - <a href="http://codefans.net">Link to DD</a>
      - <a href="http://codefans.net/">CodeFans.NET</a>
      - <a href="http://codefans.net">Email Us</a>
     </span>
    </div>
    </body>
    </html>

  • 相关阅读:
    系统调用的三层机制(上)
    深入理解计算机系统——第二章学习笔记
    MenOS
    操作系统工作流程
    从问题到程序——第一二章学习笔记
    2018-2019-1 20189210 《LInux内核原理与分析》第六周作业
    2018-2019-1 20189210 《LInux内核原理与分析》第五周作业
    2018-2019-1 20189210 《LInux内核原理与分析》第四周作业
    2018-2019-1 20189210 《Linux内核原理与分析》第三周作业
    20189210牟健 《Linux内核原理与分析》第二周作业
  • 原文地址:https://www.cnblogs.com/juan/p/1440263.html
Copyright © 2020-2023  润新知