CSSでドロップダウンメニューを実装する方法-CSSチュートリアル-php.cn

CSSでドロップダウンメニューを実装する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:10:31

オリジナル

13329 人が閲覧しました

方法: まず div 要素を使用してドロップダウンメニューのコンテンツを作成し、「display:none」スタイルを設定してそれを非表示にします。次に、ドロップダウンメニューを開く HTML 要素を作成します。最後に、「:hover」セレクターを使用して「display:block」スタイルを設定します。これは、マウスがドロップダウンボタン上に移動したときにドロップダウンメニューを表示するために使用されます。

CSSでドロップダウンメニューを実装する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

HTML 部分:

や

コンテナ要素 (

など) を使用してドロップダウンメニューのコンテンツを作成し、任意の場所に配置します。

要素を使用してこれらの要素をラップし、CSS を使用してドロップダウンコンテンツのスタイルを設定します。

CSS 部分:

.dropdown クラスは、position:relative を使用します。これにより、ドロップダウンメニューのコンテンツがドロップダウンボタンの右下隅に配置されるように設定されます (位置:絶対を使用)。

.dropdown-content クラスは、実際のドロップダウンメニューです。デフォルトでは非表示になっており、マウスが指定された要素に移動すると表示されます。 min-width 値が 160px に設定されていることに注意してください。好みに応じて変更できます。注: ドロップダウンコンテンツをドロップダウンボタンと同じ幅に設定する場合は、幅を 100% に設定します (overflow:auto 設定により、小さな画面でスクロールできます)。

box-shadow 属性を使用して、ドロップダウンメニューを「カード」のように見せます。

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

コード:

<!DOCTYPE html>
<html>
<head>
<title>document</title>
<meta charset="utf-8">
<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;
}
.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>

<body>
<div class="dropdown">
    <span>鼠标移动到这里，会出现下拉列表</span>
    <div class="dropdown-content">
        <p>表单一</p>
        <p>表单一</p>
    </div>
</div>
</body>
</html>

ログイン後にコピー

効果:

CSSでドロップダウンメニューを実装する方法