最新のWeb開発のチュートリアル
×

CSS チュートリアル

CSS HOME CSS 導入 CSS 構文 CSS の仕方 CSS 色 CSS 背景 CSSボーダー CSS 余白 CSS パディング CSS 高さ/幅 CSS テキスト CSS フォント CSS リンクス CSS リスト CSS テーブル CSS ボックスモデル CSSの概要 CSSの表示 CSS 最大幅 CSSのポジション CSS 浮く CSS Inline-block CSS 整列します CSS コンビネータ CSS 擬似クラス CSS 擬似要素 CSS ナビゲーションバー CSS ドロップダウン CSS ツールチップ CSS イメージギャラリー CSS 画像の不透明度 CSS 画像のスプライト CSS attrのセレクタ CSSフォーム CSS カウンター

CSS3

CSS3 導入 CSS3 角丸 CSS3 ボーダーイメージ CSS3 背景 CSS3 色 CSS3 グラデーション CSS3 影 CSS3 テキスト CSS3 フォント CSS3 2Dトランスフォーム CSS3 3Dトランスフォーム CSS3 トランジション CSS3 アニメーション CSS3 画像 CSS3 ボタン CSS3 ページネーション CSS3 複数の列 CSS3 ユーザーインターフェース CSS3 ボックスのサイズ設定 CSS3 Flexbox CSS3 メディアクエリー CSS3 MQ例

CSS レスポンシブWebデザイン

レスポンシブWebデザイン イントロ レスポンシブWebデザイン ビューポート レスポンシブWebデザイン グリッドビュー レスポンシブWebデザイン メディアクエリー レスポンシブWebデザイン 画像 レスポンシブWebデザイン ビデオ レスポンシブWebデザイン フレームワーク

CSS Examples

CSS 例 CSS クイズ CSS 証明書

CSS References

CSS 参照 CSS セレクタ CSS 機能 CSS リファレンス聴覚 CSS Web Safe フォント CSS アニメーション CSS ユニット CSS PX-EMコンバータ CSS 色 CSS 色値 CSS 色名 CSS3 ブラウザのサポート

 

CSSドロップダウン


CSSでhoverableドロップダウンを作成します。


デモ:ドロップダウン例

以下の例の上にマウスを移動します。


基本的なドロップダウン

ユーザーが要素の上にマウスを移動したときに表示されるドロップダウンボックスを作成します。

<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

<div class="dropdown">
  <span> Mouse over me </span>
  <div class="dropdown-content">
    <p> Hello World! </p>
  </div>
</div>
»それを自分で試してみてください

例の説明しました

HTML)例えば、A、ドロップダウンコンテンツを開くために、任意の要素を使用して<span>または<button>要素。

(のようなコンテナ要素使用<div>ドロップダウン・コンテンツを作成し、その中に好き追加します)。

ラップ<div> CSSで正しくドロップダウンコンテンツを配置する要素の周りの要素を。

CSS) .dropdownクラスの使用position:relative 、我々はドロップダウンコンテンツは(使用して右のドロップダウンボタンの下に配置したいときに必要とされるposition:absolute )。

.dropdown-contentクラスは、実際のドロップダウンの内容を保持しています。 これは、デフォルトでは非表示され、(下記参照)ホバリングに表示されます。 注min-width 160ピクセルに設定されています。 。このヒント自由変更してくださいあなたは、ドロップダウン・コンテンツの幅がドロップダウンボタンと同じ幅にしたい場合は、設定width (100%にoverflow:auto小さな画面のスクロールを有効にします)。

代わりに境界線を使用して、我々はCSS3使用したbox-shadowドロップダウンメニューは、「カード」のように見えるようにするプロパティを。

:hoverセレクターは、ユーザーがドロップダウンボタンの上にマウスを移動したときにドロップダウンメニューを表示するために使用されます。


ドロップダウンメニュー

ユーザーがリストからオプションを選択することを可能にするドロップダウンメニューを作成します。

この例では、我々は、ドロップダウンボックス内のリンクを追加し、スタイルのドロップダウンボタンに合わせてそれらのスタイルをすることを除いて、前のものと似ています。

<style>
/* Style The Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn"> Dropdown </button>
  <div class="dropdown-content">
    <a href="#"> Link 1 </a>
    <a href="#"> Link 2 </a>
    <a href="#"> Link 3 </a>
  </div>
</div>
»それを自分で試してみてください

右揃えドロップダウンコンテンツ

あなたがドロップダウンメニューが右から左に行くのではなく、左から右にしたい場合は、追加right: 0;

.dropdown-content {
    right: 0;
}
»それを自分で試してみてください

例

その他の例

ドロップダウンイメージ
この例では、ドロップダウンボックス内の画像やその他のコンテンツを追加する方法を示します。

ドロップダウンナビゲーションバー
この例では、ナビゲーションバーの内側にドロップダウンメニューを追加する方法を示します。