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

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

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

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

機能としては、

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

です。

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

◆ 実行サンプル

◆ＨＰ作成◆
予備知識
HTMLの解説
CGI（Perl）の解説

◆サンプル◆
Javascriptサンプル
JavaScriptサンプル
CGIサンプル

◆フリー素材◆
スキンボード
アクセスカウンタ
FCP Ver2.1

略号の説明	動作が確認できたブラウザ
	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の呼び出しを次のように記述します。 ◆ＨＰ作成◆ <a href="../faqhp.html">予備知識</a> <a href="../exphtml.html">HTMLの解説</a> <a href="/htm/expcgi.html">CGI（Perl）の解説</a> ◆サンプル◆ <a href="/htm/smphtm.html">Javascriptサンプル</a> <a href="/htm/smpjvsc.html">JavaScriptサンプル</a> <a href="/htm/smpcgi.html">CGIサンプル</a> ◆フリー素材◆ <a href="/htm/sknbrd.html">スキンボード</a> <a href="/htm/free.html">アクセスカウンタ</a> <a href="/htm/free.html#freesoft">FCP Ver2.1</a> <script type="text/javascript" src="puldwn3.js"></script>