jQuery

【jQuery】ハンバーガーメニューフルスクリーンHamburguer Menu Animation

February 14, 2017
hamburguer-menu-animation

Hamburguer Menu Animationはフルスクリーンメニュープラグイン。

HTML

  <div class="fat-nav">
    <div class="fat-nav__wrapper">
      <ul>
        <li>
          <a href="#home">
            <span class="primary">Home</span>
            <span class="secondary">Bem vindo ao site</span>
          </a>
        </li>
        <li>
          <a href="#sobre">
            <span class="primary">Sobre mim</span>
            <span class="secondary">Um pouco da biográfia</span>
          </a>
        </li>
        <li>
          <a href="#servicos">
            <span class="primary">Onde trabalhei</span>
            <span class="secondary">Agências que trabalhei</span>
          </a>
        </li>
        <li>
          <a href="#portifolio">
            <span class="primary">Portifólio</span>
            <span class="secondary">Conheça meu portifólio</span>
          </a>
        </li>
        <li>
          <a href="#contato">
            <span class="primary">Contato</span>
            <span class="secondary">Entre em contato</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script src="hamburguer.js"></script>

  <!-- abrir e fechar menu -->
  <div class="menu">
    <script>
      (function() {
        $.fatNav();
      }());
    </script>
  </div>
  <!-- /abrir e fechar menu -->

Download