HTML、CSS、JavaScript を使用したレスポンシブナビゲーションバーの作成-jsチュートリアル-php.cn

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

王林

リリース： 2024-08-29 13:41:35

オリジナル

284 人が閲覧しました

Creating a Responsive Navigation Bar with HTML, CSS, and 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 サイトの他の関連記事を参照してください。