HTMLとCSSだけでプルダウンメニューを作成する

2024年2月4日

当ページのリンクには広告が含まれています。

URLをコピーしました！

生徒

HTMLとCSSだけでプルダウンメニューを作成できますか？

先生

HTMLとCSSだけでプルダウンメニューを作成する手順を説明します

この記事でわかること

HTMLとCSSだけでプルダウンメニューの作り方

プルダウンメニューとは

プルダウンメニューはWEBサイトでよくみかける以下のようなメニューです。

プルダウンメニューには以下のようなメリットがあります。

多くのメニューを小さいスペースで利用できる
メニューを分類して並べることができる

一方で以下のデメリットもあるので、自分のサイトに向いているか考えて使う必要があります。

タッチ操作には向かないのでスマホサイトには向かない
表示されていないメニューを見つけにくい

HTMLとCSSでプルダウンメニューを作成

プルダウンメニューはJavaScriptを使わなくてもHTMLとCSSのみで作成できます。

jQueryなどJavaScriptを使うと、少ない記述量で作成できますが、以下のデメリットもあります。

コードのサイズが大きくなって速度が遅くなる
バージョンアップなどのメンテナンスが必要になる可能性がある

この記事では、HTMLとCSSのみで以下のプルダウンメニューを作成していきます。

HTMLとCSSの内容

HTMLとCSSでプルダウンメニューを作成していきます。

土台部分のHTMLを作成する

まずは、メニューを作成する土台部分のHTMLとCSSを記述します。

<!-- ヘッダー全体 -->
<header class="header">
  <!--  プルダウンメニュー  -->
  <div class="menu">
  </div>
</header>

CSSで、各HTML要素サイズと位置を指定します。

/* ヘッダー部 */
.header {
  width: 100%;
  height: 60px;
  background: lightgray;
}
/* プルダウンメニュー */
.menu {
  width: 80%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto; /* 水平方向中央 */
  background: DodgerBlue;  
}

今の時点での表示内容は以下になります。

See the Pen CSS-PullDownMenu-1 by mik20621 (@mik20621) on CodePen.

親メニューを作成する

次に、親メニューのHTMLを書いていきます。

<header class="header">
  <div class="menu">
    <!-- 親メニューリスト -->
    <ul class="menu__list">
      <!-- 親メニューＡ -->
      <li class="menu__item">
        <a href="#">MenuA</a>
      </li>
      <!-- 親メニューＢ -->
      <li class="menu__item">
        <a href="#">MenuB</a>
      </li>
      <!-- 親メニューＣ -->
      <li class="menu__item">
        <a href="#">MenuC</a>
      </li>
      <!-- 親メニューＤ -->
      <li class="menu__item">
        <a href="#">MenuD</a>
      </li>
    </ul>
  </div>
</header>

親項目に対するCSSは以下になります。

マウスホバー時は色を変えないとメニューの選択が分かりにくいため:hoverで別の色を指定します。

/* 今回追加した内容 */
/* メニュー内のすべてのulタグ */
.menu ul {
  list-style-type: none; /* 先頭の中点無し */
  /* ブラウザによる余分な余白を無くす */
  margin: 0;
  padding: 0; 
}
/* 親メニューリスト */
.menu__list {
  display: flex; /* 親メニューは横並び */
}
/* 親項目 */
.menu__item {
  /* 子メニューの位置の基準になるようにrelative */
  position: relative;
  width: 25%; /* メニュー4個なので4等分 */
  line-height: 60px;
  text-align: center; /* 文字を中央寄せ */
}
/* 親メニューマウスホバー時 */
.menu__item:hover {
  /* 背景色を変えて選択状態をわかりやすくする */
  background: DeepSkyBlue;
}
/* メニュー内のすべてのaタグ */
.menu a {
  /* aタグを親要素いっぱいに広げるためにflex */
  display: flex;
  justify-content: center; /* 水平方向中央寄せ */
  align-items: center; /* 垂直方法中央寄せ */
  height: 100%;
  
  color: white;
  text-decoration: none; /* リンクの下線は非表示 */
}
/* 訪問済みのリンク */
menu a:visited {
  /* ブラウザによる訪問済リンクの色の変更を抑制 */
  color: white;
}

/* 以前からの内容 */
.header {
  width: 100%;
  height: 60px;
  background: lightgray;
}
.menu {
  width: 80%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  background: DodgerBlue;
}

今の時点での表示内容は以下になります。

See the Pen CSS-PullDownMenu-2 by mik20621 (@mik20621) on CodePen.

子メニューを作成する

次に、各メニューの中に子メニューのHTML書いていきます。

<header class="header">
  <div class="menu">
    <ul class="menu__list">
      <li class="menu__item">
        <a href="#">MenuA</a>
        <!-- 子メニューのリストＡ -->
        <ul class="menu__sub__list">
          <!-- 子メニューＡ−１ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuA1</a>
          </li>
          <!-- 子メニューＡ−２ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuA2</a>
          </li>
        </ul>
      </li>
      <li class="menu__item">
        <a href="#">MenuB</a>
        <!-- 子メニューのリストＢ -->
        <ul class="menu__sub__list">
          <!-- 子メニューＢ−１ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuB1</a>
          </li>
          <!-- 子メニューＢ−２ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuB2</a>
          </li>
        </ul>
      </li>
      <li class="menu__item">
        <a href="#">MenuC</a>
        <!-- 子メニューのリストＣ -->
        <ul class="menu__sub__list">
          <!-- 子メニューＣ−１ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuC1</a>
          </li>
          <!-- 子メニューＣ−２ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuC2</a>
          </li>
        </ul>
      </li>
      <li class="menu__item">
        <a href="#">MenuD</a>
        <!-- 子項目のリストＤ -->
        <ul class="menu__sub__list">
          <!-- 子項目Ｄ−１ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuD1</a>
          </li>
          <!-- 子項目Ｄ−２ -->
          <li class="menu__sub__item">
            <a href="#">SubMenuD2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</header>

子項目に対するCSSは以下になります。

/* 今回追加した内容 */
/* 子メニューのリスト */
.menu__sub__list {
  display: none; /* 普段は非表示 */
  position: absolute; /* 親メニューからの位置を指定 */
  top: 60px;
  width: 100%;
}
/* 親メニューホバー時の子メニューのリスト */
.menu__item:hover .menu__sub__list {
  /* 親メニュー項目ホバー時は、その子項目を表示する */
  display: block;
}
/* 子メニューの背景色 */
.menu__sub__item {
  background: DodgerBlue;
}
/* 子メニューもホバー時は背景色を変える */
.menu__sub__item:hover {
  background: MediumBlue;
}

/* 以前からの内容 */
.header {
  width: 100%;
  height: 60px;
  background: lightgray;
}
.menu {
  width: 80%;
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  background: DodgerBlue;
}
.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0; 
}
.menu__list {
  display: flex;
}
.menu__item {
  position: relative;
  width: 25%;
  line-height: 60px;
  text-align: center;
}
.menu__item:hover {
  background: DeepSkyBlue;
}
.menu a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  text-decoration: none;  
}
menu a:visited {
  color: white;
}

以上で、以下のプルダウンメニューの完成です。

See the Pen CSS-PullDownMenu-3 by mik20621 (@mik20621) on CodePen.

よかったらシェアしてね！

URLをコピーしました！