大体ドコでも通じそうな汎用メニュー

スタイルシートtips

動作例

http://n9d.n9d.com/js/treemenu_div.html

リサイズするとその効能がよく分かる

ソース

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
         "http://www.w3.org/TR/REC-html40/strict.dtd">
 <html>
   <meta HTTP-EQUIV="content-type" CONTENT="text/html;charset=EUC-JP">
   <meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
   <head>
     <title>木構造表示</title>
     <!-- javaスクリプト -->
     <script Language="JavaScript">
     <!--
       function toggle(id){
         var targetElement;
         targetElement = document.getElementById(id);
         if(targetElement.className == &#39;visible&#39;){
           targetElement.className = &#39;invisible&#39;;
         }else{
           targetElement.className = &#39;visible&#39;;
         }
       }
     //-->
     </script>
     <!-- スタイルシート -->
     <style type="text/css">
     <!--
       /* === for boxsize === */
      body {width:100%;height:100%;margin:0;padding:0;overflow:hidden;}  /* IE 6.0対応（IE6.0の標準準拠モードはbodyをコンテンツ群の最小に計算する) */
       * { box-sizing : border-box} /* NN6 O7等対応用 */
       * { -moz-box-sizing : border-box} /* NN6 O7等対応用 */
       /* === for menu === */
       .visible {display:;}
       .invisible {display:none;}
       div#menu span {color:blue;text-decoration:underline;cursor:pointer;} /* pointerはIE5.5では未対応 */
       div#menu li {white-space: nowrap;} /* liの折り返しを禁止 */
       div#menu ul {padding-left:1em;} /*ulのインデント量調整 */
       div#menu ul {margin-left:0;} /*ulのインデント量調整 For IE5.5*/
       /* === for frame === */
       div#menu,div#body {position:absolute;overflow:auto;top: 0%;height:100%;border-width:1px;border:solid;}
       div#menu {left: 0%;width:30%;}
       div#body {left:30%;width:70%;}
     -->
     </style>
   </head>
   <body>
    <div id="menu">
     This is menu.
     <ul>
       <li><span onclick=&#39;toggle("c1");&#39;>第１章</span></li>
       <ul id=c1 class="invisible">
         <li>第１条</li>
         <li><span onclick=&#39;toggle("c1s2");&#39;>第２条</span></li>
         <ul id=c1s2  class="invisible">
           <li>第１号</li>
           <li>第２号</li>
         </ul>
         <li>第３条</li>
 　    </ul>
       <li><span onclick=&#39;toggle("c2");&#39;>第２章</span></li>
       <ul id=c2 class="invisible">
         <li><span onclick=&#39;toggle("c2s1");&#39;>第１条</span></li>
         <ul id=c2s1  class="invisible">
           <li>第１号</li>
           <li>第２号</li>
           <li>第３号</li>
         </ul>
         <li>第２条</li>
         <li>第３条</li>
 　    </ul>
    </ul>
   </div>
   <div id="body">
     This is body.
     <h1>test</h1>
     test
   </div>