css ドロップダウンメニューレスポンシブ

CSS: レスポンシブナビゲーションメニュー

この記事では、HTMLとCSSを使用してシンプルなレスポンシブナビゲーションメニューを作成する方法を紹介します。このメニューは、デスクトップでは水平ナビゲーションバーとして表示され、モバイルではドロップダウンメニューに変換されます。メディアクエリを使用して、異なる画面サイズに合わせて調整します。

HTML構造

まず、HTMLでナビゲーションメニューの基本構造を作成します。

順序なしリスト <ul> を使用して、ナビゲーションメニューの基本構造を作成します。
リスト項目 <li> を使用して各メニュー項目を囲み、リンク <a> を使用してクリック可能なメニュー項目を作成します。
ドロップダウンメニュー項目には、ネストされた <ul> リストを追加して、2次メニューを作成します。


<nav>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li>
      <a href="#">サービス</a>
      <ul>
        <li><a href="#">サービス1</a></li>
        <li><a href="#">サービス2</a></li>
      </ul>
    </li>
    <li><a href="#">ブログ</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

CSSスタイル

次に、CSSを使用してナビゲーションメニューのスタイルを設定します。

基本スタイル

まず、リストのデフォルトスタイルを削除し、ナビゲーションバーの背景色、幅、フォントなどを設定します。メニュー項目を水平に配置し、間隔とホバー効果を設定します。


nav {
  background-color: #333;
  width: 100%;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  position: relative;
}

nav a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  text-decoration: none;
}

nav a:hover {
  background-color: #555;
}

ドロップダウンメニューのスタイル

次に、ドロップダウンメニューのスタイルを設定します。初期状態では非表示にし、ホバー時に表示されるようにします。ドロップダウンメニューの位置、背景色、幅などを設定します。


nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
}

nav li:hover > ul {
  display: block;
}

nav ul ul li {
  display: block;
  width: 150px;
}

レスポンシブデザイン

最後に、メディアクエリを使用して、異なる画面サイズに合わせてナビゲーションメニューのスタイルを調整します。小画面では、水平ナビゲーションバーを非表示にし、ドロップダウンメニューボタンを表示します。ボタンをクリックすると、JavaScriptを使用してドロップダウンメニューの表示と非表示を切り替えます。


@media screen and (max-width: 768px) {
  nav ul {
    display: none;
  }

  nav .menu-toggle {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
  }

  nav .menu-toggle:before {
    content: "\f0c9";
    font-family: FontAwesome;
    margin-right: 5px;
  }

  nav.active ul {
    display: block;
  }
}


const menuToggle = document.querySelector('.menu-toggle');
const nav = document.querySelector('nav');

menuToggle.addEventListener('click', () => {
  nav.classList.toggle('active');
});

コード例

以下は、完全なHTMLとCSSのコード例です。コピーして変更することができます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>レスポンシブナビゲーションメニュー</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <style>
    /* 上記のCSSコード */
  </style>
</head>
<body>

  <nav>
    <a href="#" class="menu-toggle"></a>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li>
        <a href="#">サービス</a>
        <ul>
          <li><a href="#">サービス1</a></li>
          <li><a href="#">サービス2</a></li>
        </ul>
      </li>
      <li><a href="#">ブログ</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>

  <script>
    // 上記のJavaScriptコード
  </script>
</body>
</html>

まとめ

この記事では、シンプルで理解しやすいレスポンシブドロップダウンメニューの実装方法を紹介しました。コードの意味と役割を詳しく説明しているので、初心者の学習や参考資料として最適です。

よくある質問

1. ドロップダウンメニューの幅を調整するにはどうすればよいですか？

CSSで nav ul ul li の width プロパティを変更することで、ドロップダウンメニューの幅を調整できます。

2. ドロップダウンメニューの色を変更するにはどうすればよいですか？

CSSで nav ul ul の background-color プロパティを変更することで、ドロップダウンメニューの背景色を変更できます。

3. ドロップダウンメニューのアニメーションを追加するにはどうすればよいですか？

CSSで transition プロパティを使用することで、ドロップダウンメニューにアニメーションを追加できます。

その他の参考記事:CSSドロップダウンメニュー