【CSS】フレックスボックスで作られたナビゲーションバーFlexNav

CSS

FlexNav

April 1, 2018

FlexNavは、フレックスボックスで作られたヘッダー固定、レスポンシブ型のナビゲーションバーです。

How do I use it?

<div id="nav-background">
  <div id="nav-container">
    <header id="nav-header">
      <h1><a href="#" id="nav-logo">FlexNav</a></h1>
      <div id="nav-menu-button">MENU</div>
    </header>
    <nav>
      <ul class="nav-ul hide-ul">
        <li><a class="nav-link active-link" href="#">Home</a></li>
        <li><a class="nav-link" href="#">News</a></li>
        <li><a class="nav-link" href="#">Contact</a></li>
        <li><a class="nav-link" href="#">About</a></li>
      </ul>
    </nav>
  </div>
</div>
  1. nav-background ページの幅全体にまたがるナビゲーションの白い背景
  2. nav-container 異なる画面サイズごとに切り替え、ナビゲーションバーを表示する
  3. nav-header ロゴが配置されている場所
  4. nav-ulとhide-ul ナビゲーション項目にスタイルを追加し、メニューボタンをクリックするとモバイルメニューをオン/オフに切り替えます。

Latest Posts

Related Posts