Javascript

【Javascript】キーフレームとCSSトランジションを使用したシンプルなフルページメニューFull page menu

June 15, 2018
full-page-menu

Full page menuはHTML、CSS、Javascriptを使用したフルページメニュー。

    <div class="hamburger" id="hamburger" onclick="toggleNav()">
      <div></div>
      <div></div>
      <div></div>
    </div>

    <div class="me">Camden Foucht</div>
    <h1 class="title">A simple full page menu using keyframes and CSS transition.</h1>

    <div class="menu-bg" id="menu"></div>
      <div class="menu-content" id="menu-content">
        <div class="nav-container">
          <h3 class="author">Camden Foucht </h3>
          <ul class="main-list">
            <li class="main-list__item"><a class="navlink">Overview</a></li>
            <li class="main-list__item"><a class="navlink">Projects</a></li>
            <li class="main-list__item"><a class="navlink">Tutorials</a></li>
            <li class="main-list__item"><a class="navlink">Speaking</a></li>
          </ul>
            <ul class="inline-list">
              <li><a class="navlink">Designs</a></li>
              <li><a class="navlink">Websites</a></li>
              <li><a class="navlink">Resume</a></li>
            </ul>
        </div>
      </div>


  <script>
    function toggleNav(){
      if(document.getElementById('menu').classList.contains('open')){
        document.getElementById('menu-content').style.display = "none";
        document.getElementById('menu').classList.remove('open');
        document.getElementById('hamburger').classList.remove('open');
        document.getElementById('menu').classList.add('close');
      }else{
        document.getElementById('menu').style.display = "block";
        document.getElementById('menu-content').style.display = "block";
        document.getElementById('menu').classList.remove('close');
        document.getElementById('hamburger').classList.add('open');
        document.getElementById('menu').classList.add('open');
      }
    }
  </script>