CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでドロップアップメニューを作成する方法【サンプルコード付きで解説】

CSSを使えば、通常のドロップダウンメニューとは逆に、上方向へ開く「ドロップアップメニュー」も簡単に作成できます。ポイントは、メニュー本体を position: absolute で絶対配置し、bottom プロパティでボタンの上側に表示位置を指定することです。さらに :hover 疑似クラスを組み合わせることで、ボタンにマウスカーソルを合わせた瞬間にメニューを展開できます。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
.menu-btn {
    background-color: #7e32d4;
    color: white;
    padding: 16px;
    font-size: 20px;
    font-weight: bolder;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none;
}
.dropdown-menu {
    position: relative;
    display: inline-block;
    padding-top: 130px;
}
.menu-content {
    display: none;
    position: absolute;
    bottom: 50px;
    background-color: #017575;
    min-width: 160px;
    z-index: 1;
}
.links {
    color: rgb(255, 255, 255);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid black;
}
.links:hover {
    background-color: rgb(8, 107, 46);
}
.dropdown-menu:hover .menu-content {
    display: block;
}
.dropdown-menu:hover .menu-btn {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hover over the below button to open a dropup menu</h2>
<div class="dropdown-menu">
<button class="menu-btn">Open <</button>
<div class="menu-content">
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">Visit Us</a>
<a class="links" href="#">About Us</a>
</div>
</div>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のように表示されます。

CSSでドロップアップメニューを作成する方法【サンプルコード付きで解説】

「Open」ボタンにマウスカーソルを合わせると、メニューが上方向に展開されます。

CSSでドロップアップメニューを作成する方法【サンプルコード付きで解説】

コードのポイント

  • position: relative … 親要素（.dropdown-menu）に指定し、メニューを配置する基準位置を作ります。
  • position: absolute と bottom: 50px … メニュー本体（.menu-content）をボタンの上側に浮かせて表示します。
  • display: none / block の切り替え … 通常時はメニューを非表示にし、ホバー時だけ表示に切り替えます。
  • z-index: 1 … メニューが他の要素の下に隠れないよう、重なり順を調整します。
  • :hover 疑似クラス … ボタンの色変化やメニューの表示など、カーソルが乗ったときの動きを定義します。

この仕組みを応用すれば、フッター付近のナビゲーションや画面下部に配置するボタンなど、下方向にメニューを開けない場面でも使いやすいUIを実現できます。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>