Perl/ActivePerl For UNIX/Linux/Windows
 
TryThe Homepage
初めてのCGI
CGI 研究室
ダイナミックCGI
ダウンロード
サービス
サーバ構築(Windows)
データベースアクセス
有料サービス
FAQ
お問い合わせ
このページを印刷
ポップアップメニューの作成
レイヤをある程度理解する事ができれば、いろいろ面白い事が行えるようになります。 この章では、Microsoftなど有名サイトでも良く使用されているレイヤを使ったメニューの作成に挑戦します。 最近では、ホームページ作成ソフトにポップアップメニューを簡単に付けられるものがありますが、 それらのソフトが生成するJavaScriptを再配布する事はできません。 また、メニュー作成法を理解していなければCGIに応用する事もできませんので、簡単なものは作成できる必要があります。
  • ダイナミックメニューを作る
    それではこの章のまとめにダイナミックなメニューを作ってみましょう。
    <style TYPE=text/css>
      a:link {text-decoration:none;color:#405040 }
      a:visited {text-decoration:none;color:#405040 }
      a:active { text-decoration:none; color:#00FF00;background:#000000 }
      a:hover { text-decoration:none; color:#FFFF00;background:#000000 }
    </style>
    <dl>
    <dt id=menu1 class='0' onclick="menushow(1);">
      <a href=javascript:void(0)>■ 初めてのCGI</a></dt>
      <dd id=sub1 style="DISPLAY:none">
      <li><nobr><a href=#>ローカルサーバーでCGI</a></nobr></li>
      <li><nobr><a href=#>Perlマニュアル</a></nobr></li>
      <li><nobr><a href=#>ロックファイルを考える</a></nobr></li>
      <li><nobr><a href=#>Webからのメール送信機能</a></nobr></li>
      <li><nobr><a href=#>不正なタグの除去</a></nobr></li>
      </dd>
    <dt id=menu2 class='0' onclick="menushow(2);">
      <a href=javascript:void(0)>■ CGI研究室</a></dt>
      <dd id=sub2 style="DISPLAY:none">
      <li><nobr><a href=#>便利なサブルーチン関数集</a></nobr></li>
      <li><nobr><a href=#>改造の手引き</a></nobr></li>
      <li><nobr><a href=#>開発のコツ</a></nobr></li>
      <li><nobr><a href=#>グラフィックライブラリ</a></nobr></li>
      <li><nobr><a href=#>JavaとCGI</a></nobr></li>
    </dd>
    <script>
      function menushow(menu){
        var menuID=document.getElementById('menu'+menu);
        var subID=document.getElementById('sub'+menu);
        if(menuID.className=='0'){
          subID.style.display='block';
          menuID.className='1';
        }else{
          subID.style.display='none';
          menuID.className='0';
        }
      }
    </script>

    これは、今までにも何度も登場したドロップダウンメニューの基本型です。
    DISPLAY:none で隠されているサブメニューをmenushow関数が、親メニューのclassによって表示しています。
    最初はclassが0なので、メニューを表示、classを1に設定し、次に押された場合は、 classが1なので非表示に切り替えています。
    この例では、Styleの設定にPOSITION:absolute が有りませんのでレイヤではない事になります。
    次の例は、サブメニューをレイヤを使って表示しています。
    <style TYPE=text/css>
      a:link { text-decoration:none; color:#405040 }
      a:visited { text-decoration:none;color:#405040 }
      a:active { text-decoration:none; color:#00FF00;background:#000000 }
      a:hover { text-decoration:none; color:#FFFF00;background:#000000 }
    </style>
    <table border=0>
      <tr><td id=menu1 class='0' onclick="showmenu(1);">
        <a href=javascript:void(0)>■ 初めてのCGI</a></td></tr>
      <tr><td id=menu2 class='0' onclick="showmenu(2);">
        <a href=javascript:void(0)>■ CGI研究室</a></td></tr>
    </table>
    <div id=layer1 style="BORDER-RIGHT:black thin solid;BORDER-BOTTOM:thin solid; BACKGROUND-COLOR:turquoise;POSITION:absolute;DISPLAY:none; LEFT:80">
    </div>

    <div id=sub1 style="DISPLAY:none">
    <table border=0>
      <tr><td><a href=#>ローカルサーバーでCGI</a></td></tr>
      <tr><td><a href=#>Perlマニュアル</a></td></tr>
      <tr><td><a href=#>ロックファイルを考える</a></td></tr>
      <tr><td><a href=#>Webからのメール送信機能</a></td></tr>
      <tr><td><a href=#>不正なタグの除去</a></td></tr>
    </table>
    </div>
    <div id=sub2 style="DISPLAY:none">
    <table border=0>
      <tr><td><a href=#>便利なサブルーチン関数集</a></td></tr>
      <tr><td><a href=#>改造の手引き</a></td></tr>
      <tr><td><a href=#>開発のコツ</a></td></tr>
      <tr><td><a href=#>グラフィックライブラリ</a></td></tr>
      <tr><td><a href=#>JavaとCGI</a></td></tr>
    </table>
    </div>
    <script>
      var Flag=0;
      var Obj;
      function showmenu(menu){
        if(Flag) {
          if(menu!=Obj){
            var menuID=document.getElementById('menu'+Obj);
            menuID.className='0';
            subclose();
          }
        }
        menushow(menu)
      }
      function menushow(menu){
        var menuID=document.getElementById('menu'+menu);
        var subID=document.getElementById('sub'+menu);
        var layerID=document.getElementById('layer1');
        if(menuID.className=='0'){
          layerID.style.top=menu*23+16;
          layerID.innerHTML=subID.innerHTML;
          layerID.style.display='block';
          menuID.className='1';
          Flag=1;
          Obj=menu;
        }else{
          menuID.className='0';
          subclose();
        }
      }
      function subclose(){
        var layerID=document.getElementById('layer1');
        layerID.style.display='none';
        Flag=0;
      }
    </script>

Copyright 2004 Terra. All rights reserved. No reproduction or republication without written