純粋な CSS を使用してレスポンシブ ナビゲーション メニューを実装するための実装手順

純粋な CSS は、JavaScript を使用せずに応答性の高いナビゲーション メニューを簡単に作成する方法です。この記事では、応答性の高いナビゲーション メニューを実装するための詳細な手順を、具体的なコード例とともに説明します。

ステップ 1: HTML 構造
まず、ナビゲーション メニューの HTML 構造を設定する必要があります。簡単な例を次に示します。

<li class="menu-item">首页</li>
<li class="menu-item">关于我们</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

ステップ 2: CSS スタイル
次に、ナビゲーション メニューのスタイルを設定します。基本的なスタイル設定は次のとおりです。

.navbar {
背景色: #f2f2f2;
パディング: 10px;
}

.menu {
list -style: none;
表示: flex;
justify-content: center;
}

.menu-item {
margin: 0 10px;
}

この例では、背景色のあるナビゲーション バーにナビゲーション メニューを配置し、CSS Flexbox レイアウトを使用してメニュー項目を水平方向と中央揃えに配置します。

ステップ 3: レスポンシブ レイアウト
レスポンシブ ナビゲーション メニューを実装するには、メディア クエリを使用する必要があります。メディア クエリは、さまざまな画面サイズに対応するために、デバイスの幅に基づいてスタイルを変更できます。

@メディア画面と (最大幅: 768px) {
.menu {

flex-direction: column;
align-items: center;

}

.menu-item {

margin: 10px 0;

}
}

上記のコードでは、デバイスの幅が 768 ピクセル以下の場合に、メディア クエリを使用してナビゲーション メニューのレイアウトを変更します。メニュー項目を縦方向に配置し、中央揃えにします。

ステップ 4: ドロップダウン メニュー
ナビゲーション メニューには複数のサブメニュー項目が含まれる場合があります。小さな画面でより良いユーザー エクスペリエンスを提供するために、ドロップダウン メニュー機能を追加できます。

まず、HTML 構造を変更し、サブメニュー項目のドロップダウン メニュー タグを追加する必要があります:

<li class="menu-item">首页</li>
<li class="menu-item dropdown">
  关于我们
  <ul class="dropdown-menu">
    <li class="dropdown-menu-item">公司简介</li>
    <li class="dropdown-menu-item">团队</li>
    <li class="dropdown-menu-item">历史</li>
  </ul>
</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

次に、ドロップダウン メニューにスタイルを追加する必要があります:

.dropdown {
位置: 相対;
}

.dropdown-menu {
表示: なし;
位置: 絶対;
上部: 100%;
背景色 : #f2f2f2;
パディング: 10px;
}

.dropdown:hover .dropdown-menu {
表示: ブロック;
}

この例では、相対配置を使用して、親メニュー項目を基準にしてドロップダウン メニューを配置します。ドロップダウン メニューは、幅 100%、背景色 #f2f2f2 で絶対位置に配置されるようにスタイル設定されています。親メニュー項目の上にマウスを置くと、ドロップダウン メニューが表示されます。

概要:
上記の手順により、純粋な CSS 応答型ナビゲーション メニューを正常に実装できました。メディア クエリと基本的な CSS スタイルを使用すると、さまざまな画面サイズに適応するナビゲーション メニューを簡単に作成できます。この方法はシンプルで使いやすいだけでなく、優れたユーザー エクスペリエンスも提供します。ニーズに合わせてスタイルとレイアウトをさらに調整できます。

以上が純粋な CSS を使用してレスポンシブ ナビゲーション メニューを実装するための実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。