5

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

4

6 に答える 6

12

私は以前にこのようなことをしたことがあり、メニュー項目をアンカータグに配置し、それらのアンカータグ内の非表示のdivにサブメニューを配置することによって引き出されたトリックです。CSS の秘訣は、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 などで使用できることが認められています。任意のタグ。

于 2008-10-24T12:21:32.553 に答える
6

CSS Menu Makerをご覧ください。

于 2008-10-24T12:22:42.350 に答える
5

最もよく知られている手法は、フクロウのメニューです。それを検索すると、たくさんの興味深いメニューが表示されます。IE6 以下では JavaScript のみが必要です。

ここにフクロウの息子たちのメニューのリストがあります。

于 2008-10-24T12:29:57.047 に答える
2

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

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

于 2008-10-24T13:25:06.780 に答える
1

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

a:link {
 color: blue;
}

a:hover {
  color: red;
}

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

于 2008-10-24T12:20:13.023 に答える
1

純粋な CSS メニューに関するEric Meyerのオリジナル記事もあります。

他の人が言及している、はるかに堅牢でモダンなテイクアウトがあるはずですが、後世のために言及したいと思いました. :)

于 2008-10-24T13:41:55.263 に答える