0

以下のリンクを参照してください。

http://cssmenumaker.com/builder/111528

私はそれを理解しようとしています。私が理解していないのは、それがどのように機能するかです-サブメニューがどのように非表示のままで、ページの残りの部分に干渉しないかを理解できません.

さらに説明させてください-私が自分で作成しようとしたとき、サブメニューを非表示にして表示する必要があることを念頭に置いていました(私は賢いと思ってDIVタグを使用していました)が、表示されると、 DOMに配置し、他のすべてを邪魔にならないように移動します(明らかに避けたかったのですが、達成する方法が完全にはわかりません)。JS を使用して自分のものを作成しようとすると、思い通りに動作しませんでした。onmouseover イベントが発生するまで、ネストされた DIV タグ (サブメニュー) の「display」および「visibility」プロパティをそれぞれ「none」および「hidden」に変更しましたが、正しく機能せず、作成方法がわかりません。例のように何かが機能します。

ホバー コマンドを見ていますが、ホバーするまでサブメニューが非表示になる仕組みがわかりません。また、display:blockコマンドは、それらがどのように表示されるかについての唯一の参照としてしか見ることができませんが、表示されたときに他のすべてを邪魔にならないようにする方法を理解していません.

これは意味がありますか?この例がどのように機能するか、DOM モデルがどのように見えるか、DOM のすべての部分がどのように相互作用しているかを説明できる人はいますか? ここでは、W3C はあまり役に立ちません。

私の印象では、DOM モデルは静的であり、複雑な z-index やその他の方法を追加しない限り、ボックス形式で表示されるので、ここで何が欠けているのでしょうか? また、純粋な CSS ソリューションを好むので、上記の例を投稿しました。これらすべてを現在よりもはるかに理解したいと思っています。

どんな助けにも大いに感謝しています!

4

1 に答える 1

1

答えは、絶対位置です。

絶対位置は静的フローから要素を削除するため、他の要素を押しのけることはありません。絶対配置要素を制御するには、相対配置要素であるオフセットの親でそれらをラップできます。このようにして、ブロック/メニュー/などを作成できます。通常のフローで、要素を絶対配置します。

簡単な説明: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

表示なし/ブロック部分は、サブメニューを非表示/表示するだけです。親が :hover を取得した場合、display: ブロックでサブメニューを表示できます。

于 2012-10-23T14:59:42.820 に答える