HTML、CSS、JavaScript を使用したレスポンシブ ナビゲーション バーの作成

今日の Web 開発環境では、応答性が高くユーザーフレンドリーなナビゲーション バーを作成することが不可欠です。この記事では、HTML、CSS、JavaScript を使用してレスポンシブ ナビゲーション バーをデザインするプロセスについて説明します。

概要
提供されたコードは、さまざまな画面サイズに適応するナビゲーション バーを構築する方法を示しています。ナビゲーション バーには、大きな画面用の標準のトップ ナビゲーションと、小さな画面用の左側からスライドインするサイド ナビゲーション メニューが含まれています。このアプローチにより、さまざまなデバイス間でシームレスなユーザー エクスペリエンスが保証されます。

HTML 構造
HTML は Web ページの基本構造を提供します。これには以下が含まれます:

Web サイトのタイトルとサイド ナビゲーションの切り替えボタンを含む要素。
2 つの要素: 1 つはヘッダー ナビゲーション用、もう 1 つはサイド ナビゲーション用です。
ページの主なコンテンツのセクション。
トグル ボタン (☰) は、小さい画面でサイド ナビゲーション メニューを開いたり閉じたりするために使用します。

<header>
    <h1>My Website</h1>
    <button id="toggle-btn">☰</button>
    <nav id="header-nav">
        <!-- Navigation menu will be inserted here -->
    </nav>
</header>
<nav id="side-nav">
    <!-- Navigation menu will be inserted here -->
</nav>
<main>
    <h2>Welcome to My Website</h2>
    <p>This is the content of the page.</p>
</main>

CSS スタイル
CSS スタイルは、ナビゲーション要素の外観と動作を定義します。

• 一般的なスタイル: 本文とヘッダーには、フォント、間隔、レイアウトの基本的なスタイルがあります。スクロール動作: スムーズ。プロパティにより、スムーズなスクロール効果が保証されます。
• サイド ナビゲーション: 最初は左: -250px で画面外に配置されますが、アクティブなクラスが適用されると、トランジション効果でビューにスライドします。幅は 250px に設定されており、ビューポートの高さ全体をカバーします。
• レスポンシブ デザイン: メディア クエリは、画面サイズに基づいてナビゲーション要素の表示を調整します。 768 ピクセルより狭い画面の場合、ヘッダー ナビゲーションは非表示になり、トグル ボタンが表示されます。逆に、大きな画面ではサイド ナビゲーションが非表示になります。

nav#side-nav {
  background: #191d2b;
  width: 250px;
  height: 100vh;
  position: relative;
  top: 0;
  left: -250px;
  transform: translateX(0);
  transition: all .4s ease-out;
  z-index: 10;
}

nav#side-nav.active {
  left: 0;
}

@media (max-width: 768px) {
  header nav#header-nav {
    display: none;
  }

  header #toggle-btn {
    display: block;
  }
}

@media (min-width: 769px) {
  nav#side-nav {
    display: none;
  }
}

JavaScript の機能
JavaScript は、ヘッダーとサイドのナビゲーション セクションの両方にナビゲーション メニューを動的に挿入するために使用されます。このスクリプトはトグル ボタンの機能も管理し、ユーザーがサイド ナビゲーション メニューを表示または非表示にできるようにします。

const navMenu = `
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
`;

document.getElementById('header-nav').innerHTML = navMenu;
document.getElementById('side-nav').innerHTML = navMenu;

document.getElementById('toggle-btn').onclick = function() {
    let sideNav = document.getElementById('side-nav');
    sideNav.classList.toggle('active');
};

ライブデモ
レスポンシブ ナビゲーション バーの動作のライブ デモは、こちらでご覧いただけます: ライブ デモの表示

GitHub リポジトリ
HTML、CSS、JavaScript ファイルを含む完全なソース コードについては、GitHub リポジトリ: Responsive Navigation Bar にアクセスしてください。

結論
応答性の高いナビゲーション バーを作成するこのアプローチは、最新の Web デザインに堅牢なソリューションを提供します。構造には HTML、スタイルには CSS、インタラクティブには JavaScript を活用することで、開発者はあらゆるデバイスのユーザーにスムーズで適応性のあるナビゲーション エクスペリエンスを保証できます。このコードは、さまざまなプロジェクトのニーズに適応する、より複雑なナビゲーション システムの基盤として使用できます。

以上がHTML、CSS、JavaScript を使用したレスポンシブ ナビゲーション バーの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。