コンピューター, ソフトウェア
ドロップダウンCSSメニューを作成する方法
今日は、「どのように私は、ドロップダウンCSSメニューを作成するのですか？」の質問を検討します。 これは、この項目は任意の追加資金を接続せずに行われることを一度に言うべき。 これは、メニューはCSSとHTMLで作成されますされています。
トレーニング
完全に記事にそれであるかを理解するためには、理論的な材料と知り合いために少し必要です。 あなたは擬似クラスに精通している場合しかし、あなたはこの段落をスキップすることができます。 «：ホバー»だから、垂直ドロップダウンCSSメニューを作成するために、我々としての要素が必要です。 擬似«：ホバー»は、任意に割り当てることができます HTMLタグ。 それはあなたがアイテムは、あなたのマウスを移動した瞬間を定義することができます。 «：：ホバー{：赤色;}»たとえば、私たちは財産を任命しました。 このエントリは、あなたが置くとことを意味し、マウスを 、それが任意のタグのの内容に赤に変わります。 それは、この擬似要素も不活性化されていることは注目に値します。 ところで、«：ホバー»は、同様の要素を関連しています。 しかし、このことから、我々は擬似CSSのドロップダウンメニューを作成します。
命令
まずは、ドロップダウンメニューであるかを理解しましょう。 この定義の下では異なるレイアウトを構築するさまざまな方法の多くを取得します。 この場合、我々は、いくつか常に可視アイテムと（隠された）いくつかの追加からなる構造を分析します。 理論で終了し、練習を始めましょう。
- 私たちは、メニューのレイアウトを作成します。 この、HTMLコードのラベル付けをすることができません。 ネストされたリストを作成します。
-
- < / UL>。 このような何かはあなたのドロップダウンメニューのようになります。 後で介入するCSS。 この場合、メインリストは、囲まれた3つの主要分野と2で構成されています。
- サブメニューを非表示にします。 このため我々は、スタイルシートを使用し、以下のプロパティを定義する：UL UL {表示：なし;} これは、画面から2番目のリストの要素を削除します。
- メニューのCSSを作成し、メインリストからドロップダウン。 カスケーディングスタイルシートは、次のルールを記述：ULのリチウム：ホバーUL {表示：ブロック;}。 このエントリは、マウスは、ULリストに位置する素子Liは、画面に表示されるULを超えている場合（添付）することを意味します。 一見すると、このようなスキームは、複雑で混乱に見えるかもしれません。 しかし、実際には、すべてが非常に簡単です。
- タグ
- あなたのコンテンツを挿入することによって、このレイアウトを自分で使用してください。 あなたは、リストの要素の数を変更することができます。
装飾の変更
すぐにメインメニューのレイアウトは準備ができているとして、あなたが登録に進むことができます。 おそらく、リスト項目を示すマーカーを取り除くために喜んで最初の場所で多くの。 これは、1つのプロパティCSS、すなわちリスト・スタイル・タイプを使用して行われます。 李{リストスタイル型：なし;}あなたは次のエントリを追加する必要があります。 次に、フレームを挿入して行うことができます 背景を。 境界線と背景はこれであなたを助けます。 おそらく、いくつかは、プルダウンメニューが同じ基本的な要素で押して、追加のリストとして表示されます好きではないだろう。 この問題を解決するには、あなたはそれを配置することができます。 これを行うには、カスケーディングスタイルシートは、次のエントリを書き込む：UL UL {位置：絶対; 左：15ピクセル; 右：15ピクセル; トップ：15ピクセル; 底部：15ピクセル;}。 もちろん、値があなた自身が使用されます。 あなたは、ドロップダウンメニューを表示したい場所に応じて、CSSは、様々な効果を追加し、私たちのリストを飾ることができ、より多くの機能を提供します。
結論
もう一度それは、メニューのレイアウトの建設を注目に値します。 例えばこの場合埋め込み値、UL、ULで使用されるCSSルールを割り当てます。 あなたが他の類似の構造を満たすために、文書内にある場合は、大きな問題がある可能性があります。 これらの状況では、特定の目的、例えば、セレクタまたはID-IDを使用する必要があります。 上記の記事のレイアウト]ドロップダウンメニューは、一般的な設計を理解するために設計されています。 仕事の残りの部分はあなたの肩にかかっています。
Similar articles
Trending Now