純粋な 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 構造を変更し、サブメニュー項目のドロップダウン メニュー タグを追加する必要があります: