[CSSチュートリアル】display:olck/noneでメニューバーを完成させる方法

メニューバーをdisplay:bolck/noneで完成させた場合の効果 図1.

まず、"menu"エリアにマウスオーバーしたときにポップアップ表示されるエフェクトの完成形がこちら、図2です。

図2.

その代わり、"Menu"のエリアからマウスを移動させると、下のサブメニューが隠れ、図1のような効果を得ることができます。

図3.

図ソースコードの内容は、コンテンツのスタイル構造の図1と図2を達成するために、我々は最初の大きなボックスを作るためにコンテンツを表示するために使用される大きなdivを与え、ボックス内に、提示するコンテンツを完了するために5つのdivを入れて、次に＆quotを設定することです。 left float "スタイルを設定し、5つのdivが横一列に並ぶようにします。もちろん、quot;インラインブロック要素として設定し、その中にquot;順序なしリスト"を配置して、サブメニューの内容を表示させることもできます。

図4.

1. まず、一番上のliに基本的なスタイルを設定し、このタグに（絶対位置）position: relativeを与え、その下のulに（相対位置）position:absoluteを与えています。U2セクション 3. 3. 次に、liに（擬似）hoverを設定して、下位のulのクラス名を呼び出し、ulの｜display｜を｜block｜に設定する -- 図4 -- このliにマウスオーバーすると、下位のulが表示されるように実装する。

図5.

最後に、効果がやや硬いと思うのであれば、@keyframesを介してトランスフォームのアニメーションを設定することで、好みに応じて好きなアニメーションを設定することができます。

この記事はdisplay:ck/noneでメニューバーを完成させる方法のすべてです、もっと関連するdisplay:ck/noneメニューバー内容はスクリプトハウスの過去記事を検索するか、以下の関連記事を引き続きご覧ください、今後ともスクリプトハウスをよろしくお願いします！。