Javascriptを使用せずにHTMLでメニューを作成するにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/233251

  •  04-07-2019
  •  | 
  •  

質問

長年以来、GUI標準は、メニューバーのエントリをクリックまたはホバーすると、メニューがポップアップするアプリケーションのメニューバーです。一部のWebサイトもこの機能を実装していますが、私が見る限りJavascriptを使用しています。さまざまな理由で、Javascriptが問題になる可能性があるため、質問：Javascriptなしで、HTMLとCSSのみを使用して実装することは可能ですか？

役に立ちましたか？

解決

私は以前にこのようなことをしましたが、メニュー項目をアンカータグに配置し、サブメニューをそれらのアンカータグ内の非表示のdivに配置することにより、トリックが実行されました。 CSSの秘Theは、a：hoverイベント中に内部divを表示させることです。

次のようになります：

<style>
    A DIV { display: none; }
    A:hover DIV { display: block; }
</style>
<a href="blah.htm">
    Top Level Menu Text
    <div><ul>
        <li><a href="sub1.htm">Sub Item 1</a></li>
        <li><a href="sub2.htm">Sub Item 2</a></li>
        <li><a href="sub3.htm">Sub Item 3</a></li>
    </ul></div>
</a>

走行距離は異なる場合があります...

編集：Internet Explorer 6以前では、A以外の他の要素で：hover擬似クラスをサポートしていません。より「モダン」なブラウザでは、LI、TD、DIV、SPANでこのトリックを使用できることが認められています、およびほとんどのタグ。

他のヒント

CSSメニューメーカーをご覧ください。

最もよく知られている手法は、 suckerfishメニューです。それを検索すると、多くの興味深いメニューが表示されます。 IE6以前ではjavascriptのみが必要です。

ここでは、ザリガニメニューの息子たちのリストがあります。

JavaScriptが使用できない場合のバックアップとしてCSSメソッドを使用することを検討してください。 JavaScriptを使用すると、ドロップダウンメニューのユーザーエクスペリエンスが向上します。マウスがホバーエリアから少し離れるとすぐにメニューが消えるのを止めるために、いくつかの遅延係数を追加できるためです。特にホバーターゲットが小さい場合は、Pure-CSSメニューを使用するのが少し難しい場合があります。

*：もちろん、すべてのメニュースクリプトが実際にこれを行うとは限りません...

擬似クラス：hoverを使用して、ホバー効果を得ることができます。

a:link {
 color: blue;
}

a:hover {
  color: red;
}

より広範な例を挙げることができますが、今はできません（子供を歯科医に連れて行く必要があります）。

Eric Meyer の元の記事 純粋なCSSメニュー 。

他の人が言及している、はるかに堅牢でモダンなテイクが存在するはずですが、後世のために言及したいと思いました。 ：）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top