CSSドロップダウンメニュー

CSS ドロップダウンメニューは、ユーザーがさまざまなオプションから選択できるようにする一般的なユーザーインターフェイス要素です。ドロップダウンメニューは通常、トリガー要素 (ボタンやリンクなど) と 1 つ以上のオプションのリストで構成されます。ユーザーがトリガー要素を操作すると (クリックまたはホバーなど)、リストが下に展開またはスライドアウトします。

単純な CSS ドロップダウンメニューの例を次に示します。

HTMLコード:

<div class="dropdown">
  <button class="dropdown-button">选择菜单</button>
  <div class="dropdown-content">
    <a href="#">菜单项 1</a>
    <a href="#">菜单项 2</a>
    <a href="#">菜单项 3</a>
  </div>
</div>

CSSコード:

.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;
}

この例では、3 つのメニュー項目を含むドロップダウンメニューが作成されます。ユーザーが [メニューの選択] ボタンの上にマウスを置くと、ドロップダウンメニューが表示されます。このドロップダウンメニューは、絶対位置と z-index プロパティを使用してページ上に配置し、また box-shadow プロパティを使用して影効果を追加します。

ドロップダウンコンテンツの配置

ドロップダウンコンテンツの配置は、CSS プロパティを通じてtext-align設定できます。たとえば、ドロップダウンコンテンツの左揃えを設定する必要がある場合は、次のコードを使用できます。

.dropdown-content {
    
    
    text-align: left;
}

同様に、ドロップダウンコンテンツの右揃えを設定する必要がある場合は、次のコードを使用できます。

.dropdown-content {
    
    
    text-align: right;
}

これらのコードは CSS スタイルシートに追加し、スタイルシートが HTML ファイルに正しくロードされていることを確認する必要があることに注意してください。

例

1. 画像ドロップダウン

以下は、HTML と CSS を使用して画像を含むドロップダウンメニューを作成する簡単な例です。

HTMLコード:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="dropdown">
        <button class="dropdown-button">选择图片</button>
        <div class="dropdown-content">
            <a href="#"><img src="path_to_image1.jpg" alt="Image 1"></a>
            <a href="#"><img src="path_to_image2.jpg" alt="Image 2"></a>
            <a href="#"><img src="path_to_image3.jpg" alt="Image 3"></a>
        </div>
    </div>
</body>
</html>

CSS コード (styles.css):

.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-content img {
    
    
    width: 100%;
    height: auto;
}

.dropdown:hover .dropdown-content {
    
    
    display: block;
}

path_to_image1.jpg注:とpath_to_image2.jpgをpath_to_image3.jpg実際のイメージのパスに置き換える必要があります。この例では、[画像の選択] ボタンの上にマウスを置くと、画像を含む 3 つのリンクを含むドロップダウンメニューが表示されます。

2. ナビゲーションバーのドロップダウン

以下は、HTML と CSS を使用してドロップダウンメニューを含むナビゲーションバーを作成する簡単な例です。

HTMLコード:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <nav>
        <ul class="navbar">
            <li><a href="#">首页</a></li>
            <li>
                <a href="#">关于我们</a>
                <ul>
                    <li><a href="#">团队</a></li>
                    <li><a href="#">历史</a></li>
                </ul>
            </li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</body>
</html>

CSS コード (styles.css):

.navbar {
    
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

.navbar li {
    
    
    float: left;
}

.navbar li a {
    
    
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
    
    
    background-color: #111;
}

/* 下拉菜单部分 */
.navbar li ul {
    
    
    display: none;
    position: absolute;
    min-width: 160px;
}

.navbar li:hover > ul {
    
    
    display: inherit;
}

この例では、「About Us」リンクの上にマウスを置くと、「Team」と「History」のリンクを含むドロップダウンメニューが表示されます。