スタイリッシュなドロップダウンリストを作成します。 HTML のドロップダウン リストから選択する ホバー CSS のドロップダウン リスト

CSS

.wrapper-dropdown-5 {
/* サイズと位置 */
位置: 相対的;
幅: 200ピクセル;
マージン: 0 自動;
パディング: 12ピクセル 15ピクセル;

/* スタイル */
背景: #fff;
境界半径 : 5ピクセル;
ボックスシャドウ : 0 1ピクセル 0 rgba (0 , 0 , 0 , 0.2 ) ;
カーソル: ポインタ;
概要: なし;
遷移 : すべて0.3秒イーズアウト ;
}

.wrapper-dropdown-5：後{ /* 小さな矢印 */
コンテンツ: "" ;
幅: 0 ;
身長: 0 ;
位置: 絶対;
上: 50% ;
右: 15ピクセル;
マージントップ: -3px;
境界線の幅: 6ピクセル 6ピクセル 0 6ピクセル;
ボーダースタイル: 固体;
ボーダの色: #4cbeff 透明;
}

これらが主なスタイルです。 次に、通常とは少し異なるドロップダウン リストに進みます。

.wrapper-dropdown-5 。落ちる {
/* サイズと位置 */
位置: 絶対;
上: 100% ;
左: 0 ;
右: 0 ;

/* スタイル */
背景: #fff;
境界半径 : 0 0 5ピクセル 5ピクセル;
国境: 1ピクセル 固体 rgba (0 , 0 , 0 , 0.2 ) ;
ボーダートップ: なし;
ボーダーボトム: なし;
リスト形式: なし;
遷移 : すべて0.3秒イーズアウト ;

/* 非表示にする */
最大高さ: 0 ;
オーバーフロー: 隠れた;
}

今回はメニューを非表示にするために不透明度を 0 に変更しませんでした。 max-height を 0 に設定し、overflow: hidden を設定します。 なぜ高さではなく最大高さを設定したのですか? 展開されたリストの正確な高さがわからないからです。

リスト要素のシンプルなスタイル。

.wrapper-dropdown-5 。落ちるリー {
パディング: 0 10ピクセル ;
}

.wrapper-dropdown-5 。落ちるりあ {
画面: ブロック;
テキスト装飾: なし;
色: #333 ;
パディング: 10ピクセル 0 ;
遷移 : すべて0.3秒イーズアウト ;
ボーダーボトム: 1ピクセル 固体 #e6e8ea;
}

.wrapper-dropdown-5 。落ちるリー :最後のタイプある {
国境: なし;
}

.wrapper-dropdown-5 。落ちる李私 {
右マージン: 5ピクセル;
色: 継承する;
垂直整列: 真ん中;
}

/* ホバー状態 */

.wrapper-dropdown-5 。落ちるリー :ホバーある {
色: #57a9d9;
}

そして今、アクティブな状態です:

/* アクティブ状態 */

.wrapper-dropdown-5。アクティブ {
境界半径 : 5ピクセル 5ピクセル 0 0 ;
背景: #4cbeff;
ボックスシャドウ : なし;
ボーダーボトム: なし;
色: 白;
}

.wrapper-dropdown-5。アクティブ：後{
ボーダの色: #82d1ff 透明;
}

.wrapper-dropdown-5。アクティブ 。落ちる {
ボーダーボトム: 1ピクセル 固体 rgba (0 , 0 , 0 , 0.2 ) ;
最大高さ: 400ピクセル;
}

ドロップダウンが開いたら、ボタンの下隅、その色、矢印の方向、矢印の色を変更し、その影と境界線を削除します。
メニューを表示するには、ドロップダウンの最大高さを 400px に設定します。 500px または 1000px に設定できますが、それは問題ではありません。

JavaScript

関数落ちる (エル ) {
これ.DD = エル ;
これ.initイベント() ;
}
落ちる。 プロトタイプ = {
initイベント : 関数() {
変数オブジェクト = これ;

観察 DD.の上("クリック", 関数(イベント ) {
$(これ) .トグルクラス("アクティブ") ;
イベント。 伝播の停止() ;
} ) ;
}
}

下位互換性

これで、うまく機能する 5 つのドロップダウンができましたが、古いブラウザではどうなるでしょうか?
これらのブラウザは、たとえば不透明度プロパティを理解できません。

Modernizr ライブラリはこれに役立ちます。 知らない人のために簡単に言うと、Modernizr は HTML5 および CSS3 でサポートされるプロパティをユーザーのブラウザーに公開する JavaScript ライブラリです。

このおかげで、*この* プロパティをサポートしていない場合はブラウザに「伝える」ことができ、その場合は次の操作を実行します。 以下は、特定の CSS プロパティをサポートしていないブラウザのスタイルを管理する方法の例です。

/* CSS3 はサポートされていません */

.no-不透明度 .wrapper-dropdown-1。落ちる ,
.no-pointerevents .wrapper-dropdown-1 。落ちる {
画面: なし;
不透明度 : 1 ; /* 不透明度はサポートされるが、ポインター イベントはサポートされない場合 */
ポインタイベント : 自動; /* ポインター イベントはサポートされているが、ポインター イベントはサポートされていない場合 */
}

.no-不透明度 .wrapper-dropdown-1。アクティブ。落ちる ,
.no-pointerevents .wrapper-dropdown-1。アクティブ 。落ちる {
画面: ブロック;
}

ブラウザが不透明度またはポインター イベントをサポートしていない場合は、display: block; プロパティが使用されます。 等々。

結論。

この記事がカスタム ドロップダウン メニューの作成方法の理解に役立つことを願っています。 ご覧のとおり、非常にシンプルです。

デモンストレーション

ご質問がある場合は、できるだけ早く回答を得るためにフォーラムを使用することをお勧めします

HTML の単純なドロップダウン リストは、select タグを使用して簡単に作成できます。 これはコンテナ タグであり、オプション タグがその中にネストされており、リストの要素を定義します。

select タグを使用して作成できるリストには、ドロップダウン リスト (メイン フィールドをクリックするか、その上にマウスを移動するとオプションが表示されます) と、ユーザーが複数の項目を選択できる複数選択リストなど、いくつかのオプションがあります。 前者はより一般的であり、現代のサイトのナビゲーションの重要な要素です。 複数選択ドロップダウン リストは、たとえば、製品のいくつかの特性を選択する必要があるカタログで使用できます。

汎用属性と特殊属性を使用して、リストの外観とプロパティを変更できます。

タグ属性の選択

1. 複数 - 複数選択を設定します。

2. サイズ - リスト内の表示行数、つまり高さを設定します。 そして、ここではすべて、multiple 属性が存在するかどうかによって決まります。 「はい」でサイズを指定しない場合、複数が存在する場合、ユーザーには可能なすべての選択オプションが表示されますが、複数が存在しない場合は 1 行のみが表示され、訪問者は残りの部分を読むことができます。右側にあるエレベーターのアイコンをクリックします。 高さのサイズが指定されていて、それがオプションの数より小さい場合は、右側にスクロール バーが表示されます。

3. 名前 - 名前。 ドロップダウン リストはなくても問題ありませんが、サーバー上のハンドラー プログラムと対話する必要がある場合があります。 原則として、名前は引き続き表示されます。

select タグには、option タグとは異なり、必須の属性がありません。

ネストされたオプションタグの属性

1. 選択済み - リスト項目を強調表示するように設計されています。 multiple 属性が設定されている場合、ユーザーは複数の項目を選択できます (上記を参照)。
2. 値 - 値。 この属性は必須です。 Web サーバーは、ユーザーがどのリスト項目を選択したかを理解する必要があります。
3. ラベル。 この属性は、長すぎるリスト項目を短縮するために使用できます。 たとえば、オプションタグで指定した「ミラノはロンバルディア州の行政の中心地です」の代わりに「ミラノ」が画面に表示されます。 北イタリア」。 この属性は、リスト内の項目をグループ化するためにも使用されます。

リストの幅については、デフォルトでリスト内の最も幅の広いテキストの長さに設定されます。 もちろん、HTML スタイルを使用して幅を変更することもできます。

他の方法でのドロップダウン リスト

これは CSS を使用して実行できます。たとえば、ページ要素の上にマウスを置くとリストが表示されます。 リストを作成するための優れたオプションは JavaScript によって提供されており、Jquery ライブラリによって簡素化されています。 このライブラリを使用して接続されたドロップダウン リストは、カスケードなど、非常に複雑になる場合があります。 つまり、1 つのリスト内の要素を選択すると、次のリストが表示されます。たとえば、メニュー項目「婦人服」があります (その上にカーソルを置くと、タイプの 1 つを選択します。たとえば、「アウターウェア」)。 」と表示すると、ジャケット、パーカー、コート、ショートコート、ファーコートなどの要素を含むリストがドロップされます。

ドロップダウン リストを作成する主な方法を表面的にリストしました。 もちろん、JavaScript にはリストの機能や外観を変更できる微妙な機能がたくさんあります。

多くの場合、初心者はドロップダウン リストの設計という問題に直面します。 オリジナルと同じように 選択する特別なことは何もできません。 それから助けに来ます jQuery, そうすれば、ほぼ何でもできるようになります。

標準的なものも可能ですと言ったらどうですか？ HTMLドロップダウン リストをきれいにデザインするのは悪いことではありません CSS?

HTMLのドロップダウンリスト

背景と文字の色を変更することができ、非常に簡単です。

シャーロック・ホームズ グレート・ギャツビー V フォー ヴェンデッタ ウルフ・オブ・ウォールストリート 慰めの量子

で スパン 2 つのクラスを追加しました。そのうち 1 つはメインのクラスで、すべてのメイン スタイルが含まれます。」 カスタムドロップダウン」、2番目は大きく、これによってサイズが決まります ドロップダウンリスト。 事前に3サイズほどご用意させていただきますが、 大、中、小、スタイルで設定 フォントサイズ。 そして今後も気にしないでください。 これはスキップしても構いません。すべてはサイトのデザインによって異なります。

Body (背景: #2a2a2b; カラー: #fff; text-align: center; font-family: Arial、Helvetica; ) .big ( font-size: 1.2em; ) /* カスタム ドロップダウン */ .custom-dropdown (position : 相対; 表示: インラインブロック; 垂直配置: 中央; マージン: 10px; /* デモのみ */ ) .custom-dropdown select ( カーソル:ポインター; 背景色: #2980b9; カラー: #fff; フォント-サイズ: 継承; パディング: .5em; パディング右: 2.5em; ボーダー: 0; マージン: 0; ボーダー半径: 3px; テキストインデント: 0.01px; テキストオーバーフロー: ""; -webkit-Appearance: ボタン; /* Chrome OSX でデフォルトの矢印を非表示にする */ ) .custom-dropdown::before, .custom-dropdown::after ( content: "";position:Absolute; pointer-events: none; ) .custom-dropdown:: after ( /* カスタム ドロップダウン矢印 */ content: "\25BC"; height: 1em; font-size: .625em; line-height: 1; right: 1.2em; top: 50%; margin-top: -.5em ; ) .custom-dropdown::before ( /* カスタムドロップダウン矢印カバー */ width: 2em; right: 0; top: 0;bottom: 0; border-radius: 0 3px 3px 0; ) .custom-dropdown select (色: rgba(0,0,0,.3); ) .custom-dropdown select::after ( color: rgba(0,0,0,.1); ) .custom-dropdown::before ( background-color: rgba(0,0,0,.15); ) .custom-dropdown::after ( color: rgba(0,0,0,.4); )

わざわざスタイルを検討したくない場合は、サイトに追加して、サイトのデザインに合わせて色を変更するだけです。 そうすれば、あなたはただスタイリッシュです」 .custom-ドロップダウン選択”値を変更する必要があります 背景色そして 色