ホームページ > 記事 > ウェブフロントエンド > CSS Web ページ レイアウト入門チュートリアル 13: ドロップダウンとマルチレベルのポップアップ メニュー_基本チュートリアル
CSS Web ページ レイアウト入門チュートリアル 13: ドロップダウンとマルチレベルのポップアップ メニュー_基本チュートリアル
- WBOYオリジナル
- 2016-05-16 12:07:201326ブラウズ
ドロップダウン メニューとポップアップ メニューは、Web サイトのデザインで一般的に使用されるナビゲーション フォームです。このメニュー フォームは、ページ上の現在のスペースを最大限に活用して、より多くのコンテンツを非表示にしたり表示したりすることができ、コンテンツを合理的に分類して表示できます。非常に優れたナビゲーションフォーム。
初期のドロップダウン メニューまたはポップアップ メニューは、非表示のレイヤーまたは div を使用してコンテンツを非表示にし、JavaScript スクリプトを通じてユーザー操作に応答していました。現在では、JavaScript div または他の要素もこのようなナビゲーションの作成に使用されます。違いは、ナビゲーション全体は標準の CSS レイアウトを使用して構築され、メニューの作成にテーブルは使用されなくなります。ドロップダウン メニューは、上記の水平ナビゲーションと垂直ナビゲーションを組み合わせたものであり、CSS の多数の属性サポートにより、同じメニューが作成されます。相互に連携するには複数の div が必要です。CSS レイアウトを使用してドロップダウン メニュー要素を作成します。ul または li 要素を直接制御することもできます。次に、最も単純なドロップダウン メニューを作成してみましょう。追加する必要があるものドロップダウン メニューの実装です。私は JavaScript テクノロジについて多くのことを学びました。ここでは、JavaScript テクノロジの構文についてあまり包括的に理解するつもりはありません。CSS の柔軟性により、既存の例を通じてそれを伝えたいだけです。要素属性を使用すると、Web ページで要素を使用することがより簡単かつ便利になります。まず、現在設計されているナビゲーション コードの XHTML 部分を見てみましょう:
- すべて
ウェブ テクノロジー
ul 構造を使用した標準的なメニュー構造ですが、前のメニュー構造と異なるのは、コード構造がネストされていて、メニューとメニューの間に別の ul 構造が挿入されていることです。第 1 レベルの li. これは、複数レベルのメニューのコード構成パターンです。XHTML コードを使用すると、ネストされた要素を通じて目的の効果や構造を実現できます。次に、必要に応じてメニューを水平にするための簡単な CSS スタイルをいくつか記述してみます。
ul { padding:0; margin:0; list-style:none;}
li { float :left; width:100px;}
最初のステップは、ナビゲーション システムの ul 要素の基本設定を行うことです。list-style:none 属性を使用すると、ul 内のすべてのドットを削除できます。 list-style 属性には、他にも豊富な使用法があります。これについては、次のリスト要素で説明します。
ナビゲーションを水平にしたいと考えています。li に float:left 属性を設定して、すべての li を左にフローティングして水平レイアウトを形成し、各 li の幅を 100px になるようにしてから続行します。コードの記述:
li ul { display:none; top:20px;}
ここでの li ul の定義は、li より下のすべての ul 要素を指します。トップレベルを除きます。 ul 要素、すべて li 以下に定義されている ul 要素は、スタイルのこの部分によって定義されます。ここでは、top 属性を使用して UL 全体の上マージンを設定し、display:none を使用してこの部分を非表示にします。基本的に、CSS のすべての要素は、表示属性を使用して表示または非表示を制御できます。
li:hover ul,li.over ul { display:block;}
li:hover ul は、li 要素の下に ul 要素を定義します。コンマで区切ると、display:block 属性は両方の場合に使用できます。display:block 属性は、display:none 属性の逆です。一方は非表示になり、もう一方は表示されます。display:block に設定すると、表示されるだけでなく、割り当てられた要素が表示され、ブロック状にも表示されます。display:block が使用されていない場合、要素は画面上でそのコンテンツが占める領域に応じてのみ表示されます。この設定は要素自体が幅広のブロックを形成するため、独自のポイントマーカーとしてボタンを大きくする場合に非常に便利です。
下部のプレビュー コードでは、中に と js コードが追加されていることがわかります。これは、IE ブラウザでのドロップダウン メニューの表示を制御するために使用されます。元の文 li: hover ul は Yes ですが、IE の CSS サポートはまだ不完全なので、JS を使用して制御する必要があります。
次に、ドロップダウン メニューにいくつかのスタイルを追加してみます。
ul li a { display:block; font-size:12px; border:1px Solid #ccc; margin-top:2px; margin-left: 3px; padding:3px; text-decoration:none; color:#777;}
ul li a:hover {background-color:#ddd;}
ドロップのフォーカスCSS レイアウトの -down メニュー制御は、要素の表示と非表示を切り替えます。