「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

メニューをクリックしてサブメニューを表示させたい

パソコンお助け情報

Webページ作成

困った顔アイコン メニューをクリックしてサブメニューを表示させたい。

解決した顔アイコン JavaScript とスタイルシートでサブメニューを表示させたり見えなくしたり出来ます。

例えば「HTMLの用語」をクリックしたら、「HTML」「DTD」「タグと要素と属性」「スタイルシート」とサブメニューを表示しそれぞれの id へリンクします。更に「HTMLの用語」をクリックするとサブメニューを非表示にします。

次の例では、サブメニューの id に[sub_1]、リンク先に[sub_1-1]〜[sub_1-4]を指定しています。

<p><a href="#" onClick="sub_1.style.display=('none'==sub_1.style.display)?'':'none';return false;">HTMLの用語</a></p>
   <ul id="sub_1" style="display:none;">
     <li><a href="#sub_1-1">HTML</a></li>
     <li><a href="#sub_1-2">DTD</a></li>
     <li><a href="#sub_1-3">タグと要素と属性</a></li>
     <li><a href="#sub_1-4">スタイルシート</a></li>
   </ul>

上記例の id="sub_1" の値を "sub-1" (アンダーバーでなくハイフォン)とすると JavaScript が動きません。

ページの作り方やブラウザにより対応しない場合があります。

[ style="display:none;"]をインラインでなく、CSSファイルにすると、[onClick=]のJavaScript が動作しません。

文書型宣言を Transitional にすると Internet Explorer、Opera、FireFox で動作します。Netscape では判りません。

  実例 会員のページ[パソコンで楽しむ]

XHTML 1.0 Strict では、FireFox で動作しません。Netscape では判りません。

  実例 会員のページ[HTML Project2 を使う]

JavaScript を使っていますので、JavaScript に非対応のブラウザ使用の場合や機能をオフにしている場合、代替の文書を次のように上記ソースの1行目と2行目の間に入れます。

<noscript>
<!--単に[JavaScriptを使用しています]ではなく、下記のように代わりに表示させる文書-->
<ul>
   <li><a href="#sub_1-1">HTML</a></li>
   <li><a href="#sub_1-2">DTD</a></li>
   <li><a href="#sub_1-3">タグと要素と属性</a></li>
   <li><a href="#sub_1-4">スタイルシート</a></li>
</ul>

</noscript>

しかし、XHTML 1.0 Strict の、FireFox でJavaScriptを無効にしているときはこのnoscript要素は効き目がありますが、有効にしている時はサブメニューが非表示のままです。

上記ソースの説明(あまり自信がありませんが)


「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

(2007/5/13 UP) 作成&連絡先 NET・陽だまり