Javascript

【Javascript】ハンバーガーメニューオーバーレイHamburger Menu Overlay

April 23, 2017
Hamburger Menu Overlay

Hamburger Menu Overlayはナビゲーションバーメニューがハンバーガーメニューアイコンに変わり、アイコンを押すとオーバーレイが画面全体をカバーし、メニューオプションが表示されるレスポンシブデザインのメニュー。

HTML

  <body>
    <header>
      <nav>
        <img class="swan-logo" src="./img/swan-logo.svg" alt="swan" />
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
        <img class="hamburger-menu" src="./img/hamburger-menu.svg" alt="hamburger menu" onclick="openNav()" />
      </nav>
    </header>
    <section id="overlay-nav" class="overlay">
      <a href="javascript:void(0)" class="close-menu" onclick="closeNav()">&times;</a>
      <div class="overlay-content">
        <ul class=overlay-tabs>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </section>
    <script src="script.js"></script>
  </body>