zoukankan      html  css  js  c++  java
  • 简单实现点击可展开、关闭的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>

  • 相关阅读:
    1月27日 常用函数
    1月25日 JavaScript的DOM操作
    1月25日 JavaScript简介与语法
    1月24日 样式表案例
    5月14日 数字顺序打印并求和
    5月14日 根据班级人数,求平局分,最大值,最小值
    5月14日 九九乘法口诀
    5月14日 打印100以内与7有关的数
    5月14日 函数练习 100以内奇数的和
    5月14日 枚举类型
  • 原文地址:https://www.cnblogs.com/juan/p/1440263.html
Copyright © 2011-2022 走看看