レスポンシブデザイン用のスライドサイドナビゲーションメニューを作成します-CSSチュートリアル-php.cn

レスポンシブデザイン用のスライドサイドナビゲーションメニューを作成します

William Shakespeare

リリース： 2025-03-01 09:03:12

オリジナル

676 人が閲覧しました

このチュートリアルは、JavaScriptとCSSを使用してレスポンシブ拡張可能なサイドナビゲーションメニューを構築する方法を示しています。最終結果は、洗練されたモダンなメニューです。

Making a Sliding Side Navigation Menu for Responsive Designs

これがライブデモです：

1。 HTML構造：サイドメニューのHTMLを追加することから始めます：

これにより、サイドメニュー（

）、ハンバーガーアイコン（

<div class="sidenav" id="sideNavigation">
  <a class="close-btn" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">×</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Features</a>
  <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact Us</a>
</div>

<nav class="topnav">
  <a class="ham-icon" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <svg height="30" id="icoOpen" width="30">
      <path d="M0,5 30,5" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,14 30,14" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
      <path d="M0,23 30,23" stroke="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000" stroke-width="5"></path>
    </svg>
  </a>
</nav>

<main id="main">
  <h1>This Side Navigation Menu Looks Good!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>

ログイン後にコピー

）を開くには、閉じるボタン（

）、およびメインコンテンツ領域（sidenav）が設定されます。 ham-iconclose-btn2。 JavaScript機能：main

このJavaScriptは、メニューのオープンアクションとクローズアクションを処理します：ハンバーガーアイコンをクリックすると、メニューが展開されます。 [閉じる]ボタンをクリックすると崩壊します。

3。 CSSスタイリング：

document.querySelector("a.ham-icon").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
});

document.querySelector("a.close-btn").addEventListener("click", function(event){
  document.getElementById("sideNavigation").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
});

ログイン後にコピー

CSSはメニューとそのアニメーションをスタイルします：

このCSSは、スムーズなスライドアニメーションを提供し、オーバーフローを処理し、小さな画面の応答性を追加します。体の

は、水平面の巻物を防ぎます。

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  padding: 20px;
  width: 100%;
}

body {
  overflow-x: hidden;
}

a svg {
  transition: all 0.5s ease;
}

a svg:hover {
  transform: rotate(180deg);
}

@media screen and (max-height: 480px) {
  .sidenav {
    padding-top: 3rem;
  }
  .sidenav a {
    font-size: 1.5rem;
  }
}

ログイン後にコピー

4。スライドアニメーションの削除（オプション）：

overflow-x: hidden; スライドアニメーションを削除するには、CSSの

>プロパティを

に設定してください：

これにより、メニューが表示され、即座に消えます。

transition0s結論：

.sidenav {
  transition: 0s;
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmain {
  transition: margin-left 0s;
}

ログイン後にコピー

このシンプルでありながら効果的なサイドナビゲーションメニューは、さまざまな設計ニーズに簡単にカスタマイズでき、適応できます。より高度なスタイリングオプションについては、BootstrapやBulmaなどのCSSフレームワークを使用することを検討してください。彼の貢献をしてくれたモンティ・ショーキーンに感謝します！

以上がレスポンシブデザイン用のスライドサイドナビゲーションメニューを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。