テキストの代わりに画像を表示するドロップダウン メニューを作成するにはどうすればよいですか?

Patricia Arquette
リリース: 2024-11-08 05:23:02
オリジナル
862 人が閲覧しました

How can I create a dropdown menu that displays images instead of text?

ドロップダウン オプションで画像を表示する

テキストの代わりに画像を表示するドロップダウン選択を作成するのは難しい場合があります。 jQuery コンボボックスは提案されていますが、画像を伴うテキスト オプションの提供に依存しています。テキストを画像で完全に置き換えるには、別のアプローチが必要です。

賢い CSS ソリューション

この特定の使用例では、画像がオンラインの線の太さを表します。ペイントアプリなのでJavaScriptは必要ありません。代わりに、ラジオ ボタンと CSS を活用して、目的の効果を作成できます。

HTML 構造

<div>
ログイン後にコピー

CSS スタイル

#image-dropdown {
    border: 1px solid black;
    width: 200px;
    height: 50px;
    overflow: hidden;
    transition: height 0.1s;
}
#image-dropdown:hover {
    height: 200px; 
    overflow-y: scroll;
    transition: height 0.5s;
}
#image-dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
#image-dropdown label {
    display: none; 
    margin: 2px; 
    height: 46px; 
    opacity: 0.2; 
    background: url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;
}
#image-dropdown:hover label {
    display: block;
}
#image-dropdown input:checked + label {
    opacity: 1 !important; 
    display: block;
}
ログイン後にコピー

仕組み

その秘訣は、「for」属性と「id」属性を使用してラベルをラジオ ボタンに関連付けることにあります。ラベルをクリックすると、対応するラジオ ボタンがアクティブになります。 CSS スタイルにより、次のことが保証されます。

  • 折りたたまれた状態では、選択したラジオ ボタンのラベルのみが表示されます。
  • ドロップダウンが展開されると (ホバー上で)、すべてのラベルが表示されます。
  • チェックされたラジオ ボタンに続くラベルは、折りたたまれた状態でも表示されたままになります。

ラベルに背景画像を割り当てると、ドロップダウン オプションが画像として表示されます。このアプローチでは、テキストを効果的に画像に置き換え、JavaScript を使用せずに必要な機能を実現します。

以上がテキストの代わりに画像を表示するドロップダウン メニューを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート