トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ プルダウンメニューを3つ作成する

プルダウンメニューの応用編です。

最近初心者の方からプルダウンメニューを複数設置したいけど解らないとか、エラーが出てうまくいかないという質問がありますので、今回プルダウンメニューを3つ設置したサンプルを記述します。

機能としては、

1.ページを開いたときメインメニューのみの表示
2.メインメニューをクリックするたびそのサブメニューが表示/非表示
  に切り替わる。
3.メインメニューをクリックすると他のサブメニューが自動的に閉じる。

です。

この下の「◆HP作成◆」〜「◆フリー素材◆」をクリックしてみてください。

◆ 実行サンプル

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「puldwn3.js」というファイル名で保存します。
txt_hide('div01'); txt_hide('div02'); txt_hide('div03'); function txt_hide(tagnam1){ document.getElementById(tagnam1).style.display='none'; } function txt_flip(tagnam1){ if (document.getElementById(tagnam1).style.display == '') { document.getElementById(tagnam1).style.display='none'; } else { //他のメニューを自動的に閉じたくない場合は次の3行を削除してください。 txt_hide('div01'); txt_hide('div02'); txt_hide('div03'); document.getElementById(tagnam1).style.display=''; } }


そしてメニューJavascriptの呼び出しを次のように記述します。 <span onclick="txt_flip('div01')" title="ここをクリックしてください。"> ◆HP作成◆ </span><br> <span id="div01"> <a href="../faqhp.html">予備知識</a><br> <a href="../exphtml.html">HTMLの解説</a><br> <a href="/htm/expcgi.html">CGI(Perl)の解説</a><br> </span> <br> <span onclick="txt_flip('div02')" title="ここをクリックしてください。"> ◆サンプル◆ </span><br> <span id="div02"> <a href="/htm/smphtm.html">Javascriptサンプル</a><br> <a href="/htm/smpjvsc.html">JavaScriptサンプル</a><br> <a href="/htm/smpcgi.html">CGIサンプル</a><br> </span> <br> <span onclick="txt_flip('div03')" title="ここをクリックしてください。"> ◆フリー素材◆ </span><br> <span id="div03"> <a href="/htm/sknbrd.html">スキンボード</a><br> <a href="/htm/free.html">アクセスカウンタ</a><br> <a href="/htm/free.html#freesoft">FCP Ver2.1</a><br> </span> <script type="text/javascript" src="puldwn3.js"></script>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom