display:olck/none を使用してメニューバーを作成する方法

display:bolck/none によるメニューバーの完成の効果 図 1:

まず、完成したエフェクトです。マウスを「メニュー」領域に移動すると、ポップアップします。図2のエフェクト

図2:

逆に、マウスを「メニュー」領域の外に移動すると、下のサブメニューが非表示になり、図 1 に示すような効果が得られます。

図3:

図のソースコードは、図 1 と図 2 のコンテンツ スタイル構造を実装したものです。まず、大きな div を指定して、表示されるコンテンツ用の大きなボックスを作成し、そのボックス内に 5 つの div を配置して、表示するコンテンツを完成させます。次に、これらの 5 つの div に「左フロート」スタイルを設定して、横一列に並べられるようにします。もちろん、「インライン ブロック レベル要素」に設定して、その中に「順序なしリスト」を配置して、サブメニューのコンテンツを表示することもできます。

図4:

1. まず、トップ li にいくつかの基本スタイルを設定し、このタグに (絶対配置) position: relative を指定します。次に、その下位の ul に (相対配置) position: absolute を設定します。2. この ul の |display| を |none| に設定して非表示にします (図 5 - U2 部分を参照)。 3. 次に、（疑似クラス）ホバーを下位の ul のクラス名を呼び出すように設定し、ul の | display | を | block | に設定します。—— 図 4 —— マウスがこの li の上に移動すると、下位の ul が表示されることがわかります。

図5:

最後に、効果が少し硬いと感じた場合は、@keyframes を使用して変換アニメーション効果を設定し、自分の好みに応じて必要なアニメーション効果を設定できます。

display:olck/none でメニューバーを完成させる方法については、これで終わりです。display:olck/none メニューバーに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。