CSS 基礎学習 -- 19 ドロップダウンメニュー

1. 基本的なドロップダウンメニュー

指定した要素の上にマウスを移動すると、ドロップダウンメニューが表示されます

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</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>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>CSS教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>
</html>

分析例

HTML セクション:

<span> 要素や <button> 要素など、任意の HTML 要素を使用してドロップダウンメニューを開くことができます。

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

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

CSS セクション:

.dropdown class use position:relative、これにより、ドロップダウンメニューのコンテンツが position:absoluteドロップダウンボタン (use) の右下位置に配置されるように設定されます。

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

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

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

2. プルダウンメニュー

ドロップダウンメニューを作成し、ユーザーがリストから項目を選択できるようにします。

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例II</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

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

.dropdown-content a:hover {background-color: #f1f1f1}

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="http://www.jiaocheng.com">CSS教程 1</a>
    <a href="http://www.jiaocheng.com">CSS教程 2</a>
    <a href="http://www.jiaocheng.com">CSS教程 3</a>
  </div>
</div>

</body>
</html>

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

ドロップダウンの配置は次のとおりです。

(1) 左フローティングドロップダウンメニューのコンテンツの方向を右から左ではなく左から右に設定します。

(2) 右側にフローティングされているドロップダウンメニューのコンテンツの方向を、左から右ではなく右から左に設定します。

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例III</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

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

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

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

.dropdown-content a:hover {background-color: #f1f1f1}

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

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>
</head>
<body>

<h2>下拉内容的对齐方式</h2>
<p>left 和 right 属性指定了下拉内容是从左到右或从右到左。</p>

<div class="dropdown" style="float:left;">
  <button class="dropbtn">左</button>
  <div class="dropdown-content" style="left:0;">
    <a href="#">CSS教程 1</a>
    <a href="#">CSS教程 2</a>
    <a href="#">CSS教程 3</a>
  </div>
</div>

<div class="dropdown" style="float:right;">
  <button class="dropbtn">右</button>
  <div class="dropdown-content">
    <a href="#">CSS教程 1</a>
    <a href="#">CSS教程 2</a>
    <a href="#">CSS教程 3</a>
  </div>
</div>

</body>
</html>

左のレンダリング:

正しいレンダリング: