ハンバーガーメニュー + α

#
```html:filename.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hamburgerMenu</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <div class="headerWrapper">
      <div class="headerInner">
        <h1>
          <a href="#">sample</a>
        </h1>
        <div class="navToggle for_sp">
          <span></span><span></span><span></span>
        </div>
      </div>
  
      <div id="globalMenuSp" class="">
        <ul id="manu" class="menu">
          <li>
            <a href="#home" target="_top" class="home">Home</a>
          </li>
          <li>
            <a href="#about" target="_top" class="about">About</a>
          </li>
          <li>
            <a href="#skills" target="_top" class="skills">Skills</a>
          </li>
          <li>
            <a href="#portfolio" target="_top" class="portfolio">Portfolio</a>
          </li>
        </ul>
      </div>
    </div>

  </header>
  <main>
    <section class="mv">
      <div class="mvWrapper">
        <img src="./img/cat01.jpg" alt="cat">
      </div>
    </section>
    <div class="sample" id="about">
      <div class="inner">
        <h2>About</h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
      </div>

    </div>
    <div class="sample" id="skills">
      <div class="inner">
        <h2>Skills</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
        </p>
        <ul class="cardWrapper">
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>HTML / CSS</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>jQuery / JavaScript</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Sass / scss</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Git / SourceTree</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Responsive</h3>
              <p>
                レスポンシブ対応可能です。
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Visual Studio Code</h3>
              <p>
                ショートカット、プラグインを使い慣れています。
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>photoshop / Illustrator</h3>
              <p>
                WEBデザイナーが作成したPSD等をjpg,png形式に書き出す作業程度に利用可能です。
              </p>
            </div>
          </li>
        </ul>
      </div>
      </div>

    <div class="sample" id="portfolio">
      <div class="inner">
        <h2>portfolio</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde incidunt voluptate totam hic non commodi molestias vero ullam blanditiis vitae neque et minus nemo optio ex doloremque mollitia, tenetur cumque.
        </p>
        <ul class="cardWrapper">
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <ul>
                <li>
                  利用スキル：Vue.js / firebase
                </li>
                <li>製作期間：2か月</li>
                <li>
                  特徴：ログイン機能 / 
                </li>
              </ul>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>Corporate Site</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
          <li>
            <div class="cardImg">
              <img src="./img/cat01.jpg" alt="">
            </div>
            <div class="cardText">
              <h3>ToDoList Application</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias optio provident sed iste ipsam nostrum quos animi vel architecto incidunt, doloribus delectus doloremque enim dolore placeat fuga assumenda labore qui!
              </p>
            </div>
          </li>
        </ul>
      </div>

    </div>

  </main>

  <footer>
    <div class="topScroll">
      <a href="#"></a>
    </div>
    <div class="footerTop">
      <ul class="inner">
        <li>
          <a href="">aaa</a>
        </li>
        <li>
          <a href="">bbb</a>
        </li>
        <li>
          <a href="">ccc</a>
        </li>
        <li>
          <a href="">ddd</a>
        </li>
      </ul>
    </div>
    <div class="footerBottom">
      <p class="copyRight">&copy;copyRight 2020</p>
    </div>
  </footer>

  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/module.js"></script>
</body>
</html>
```

```css:style.css
@import url(./reset.css);

.for_pc {
  display: none;
}
.for_sp {
  display: block;
}

img {
  width: 100%;
}

/*ハンバーガーメニュー*/

header {
  position: fixed;
  top: 0;
  z-index: 100;
  background-color: #20b2aa;
  width: 100%;
}

.headerInner {
  padding: 2% 5%;
}

.headerInner h1 {
  text-align: center;
  width: 100%;
  font-size: 10vw;
}

.headerInner h1 a {
  color: white;
}

#globalMenuSp {
  position: fixed;
  z-index: 4;
  top: 0;
  left: -100%;
  color: #000;
  text-align: center;
  transform: translateX(0);
  transition: transform 0.4s;
  width: 100%;
  padding-top:-100px;
  opacity: 0.9;
  padding-top: 17%;
}
  
#globalMenuSp ul {
  background: #20b2aa;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  display:inherit;
}

#globalMenuSp ul li {
  font-size: 1.1em;
  list-style-type: none;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #fff;
}

/* 最後はラインを描かない */
#globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

#globalMenuSp ul li a {
  display: block;
  color: #fff;
  padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
#globalMenuSp.active {
  transform: translateX(100%);
}

/*ハンバーガー用CSS*/
.navToggle {
  display: block;
  position: fixed;    /* bodyに対しての絶対位置指定 */
  right: 13px;
  top: 12px;
  width: 42px;
  height: 40px;
  cursor: pointer;
  z-index: 101;
  text-align: center;
}

.navToggle span {
  display: block;
  position: absolute;    /* .navToggleに対して */
  width: 30px;
  /* border-bottom: solid 3px #20b2aa; */
  border-bottom: solid 3px #fff;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  left: 6px;
}

.navToggle span:nth-child(1) {
  top: 9px;
}

.navToggle span:nth-child(2) {
  top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}

.navToggle span:nth-child(4) {
  border: none;
  color: #eee;
  font-size: 9px;
  font-weight: bold;
  top: 34px;
}

/*ハンバーガーメニュータップ後CSS*/
/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
  top: 18px;
  left: 6px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
  top: 18px;
  border-bottom: solid 3px #eee;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

.inner {
  padding: 0 5%;
}

h2 {
  font-size: 40px;
  margin-bottom: 20px;
}

h2::before {
  content: "";
  border-right: 10px solid #20b2aa;
  margin-right: 20px;
}

.mv {
  padding-top: 20%;
}

.sample {
  padding-top: 20%;
}

.cardText ul li {
  margin: 0 0;
}

.topScroll {
  width: 70px;
  height: 70px;
  background-color: #20b2aa;
  border-radius: 50%;
  position: fixed;
  bottom: 5%;
  right: 5%;
}

.topScroll a {
  width: 100%;
  height: 100%;
  position: relative;
  display: block;
}

.topScroll a::before {
  content: "";
  border-left: 3px solid #fff;
  border-top: 3px solid #fff;
  width: 25px;
  height: 25px;

  transform: rotate(45deg);
  position: absolute;
  top: 30px;
  left: 21px;
}

.footerTop {
  padding: 2% 0;
  text-align: center;
  background-color: #20b2aa;
}



.footerTop ul li a {
  display: block;
  color: white;
  padding: 2% 0;
}

.footerTop ul li a:hover {
  background-color: aquamarine;
  transition: background-color 0.5s;
}

.footerBottom {
  padding: 5% 0;
  background: black;
  color: white;
}

.copyRight {
  display: block;
  text-align: center;
}















@media screen and (min-width: 568px) {
  .for_sp {
    display: none;
  }
  .for_pc {
    display: block;
  }

  #globalMenuSp {
    width: 100%;
    transform: translateY(0%);
    transition: none;
    left: 0;
    position: static;
    padding-top: 0;
  }

  #globalMenuSp ul {
    display: flex;
    /* width: 1080px; */
  }

  #globalMenuSp ul li {
    border-bottom: 5px solid #20b2aa;
  }

  #globalMenuSp ul li:hover {
    /* background-color: aquamarine;
    transition: background-color 0.5s; */
    border-bottom: 5px solid orange;
  }

  #globalMenuSp.active {
    transform: translateX(0);
  }

  .headerWrapper {
    display: flex;
    width: 1080px;
    margin: 0 auto;
  }

  .headerInner {
    padding: 0 0;
    /* width: 1080px; */
  }

  .headerInner h1 {
    text-align: left;
    font-size: 40px;
    margin-right: 150px;
  }

  .inner {
    width: 1080px;
    margin: 0 auto;
    padding: 0 0;
  }

  .mv {
    width: 100%;
    background-color: aliceblue;
    padding-top: 0;
  }

  .mvWrapper {
    width: 1080px;
    margin: 0 auto;
  }

  .mv img {
    max-width: 1080px;
    height: auto;
  }

  .sample {
    padding-top: 150px;
  }


  #skills {
    background-color: aliceblue;
  }

  .cardWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .cardWrapper li {
    width: 500px;
    margin: 20px 0;

    margin-right: 80px;
  }

  .cardWrapper li:nth-child(2n) {
    margin-right: 0;
  }


  .footerTop ul {
    display: flex;
    justify-content: space-evenly;
  }

  .footerTop ul li {
    width: 100%;
  }

  .footerTop ul li a {
    display: block;
  }
}
  
```

```js:module.js
$(function() {
  $('.navToggle').click(function() {
      $(this).toggleClass('active');
      if ($(this).hasClass('active')) {
          $('#globalMenuSp').addClass('active');
      } else {
          $('#globalMenuSp').removeClass('active');
      }        
  });
});

$('#manu a[href]').on('click', function(event) {
    $('.navToggle').trigger('click');
});

// smooth scroll
$(function(){
    // #で始まるリンクをクリックしたら実行されます
    $('a[href^="#"]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒で記述
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
```