ヘッダーの動き【Vo.01】

dummy site

ヘッダーの動き【Vo.01】

・ハンバーガーメニューを押下すると、メニューが表示されます。

・左からスライドしてメニューが表示

・背景　黒（透過）

ハンバーガーメニューがクリックされたときのcss

・navにtransition-delay: .4s;を指定し、0.4秒遅れて文字を表示

※表示・非表示切り替えの際、display: block;・display: none;指定だと挙動がおかしく見えたのでopacityの変化のみ指定

・透過背景にtransition: all .6s ease-in;を指定し、0.6秒かけて背景を表示

※最初はmargin-left: -300px;とopacity: 0;で非表示

※ハンバーガーメニューを押下すると、margin-left: 0;とopacity: 1;で表示

ハンバーガーメニューがクリックされたときのjs

・ハンバーガーメニューを押下すると、headerにopenクラスが付与

スムーズスクロール：js

・ページ内リンクを取得し、画面トップからリンク先までの距離を取得後、指定の速度でスクロール

ヘッダーの動き【Vo.02】はこちらヘッダーの動き【Vo.03】はこちら

header部分のHTML / css

HTML

            <header id="new-header">
<div class="new-wrapper">
  <h1>dummy site</h1>
  <nav>
    <ul>
      <li><a href="#sec-01">ダミーセクション01</a></li>
      <li><a href="#sec-02">ダミーセクション02</a></li>
      <li><a href="#sec-03">ダミーセクション03</a></li>
      <li><a href="#sec-04">ダミーセクション04</a></li>
    </ul>
  </nav>
  <div class="ham">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="mask"></div>
</div>
</header>

css

            #new-header {
  width: 100%;
  height: 80px;
  background-color: #fff;
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

#new-header .new-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#new-header .new-wrapper h1 {
  font-weight: bold;
  font-size: 2rem;
  margin-left: 20px;
}

#new-header .new-wrapper nav {
  opacity: 0;
  position: fixed;
  top: 100px;
  left: 60px;
  color: #fff;
  transition-delay: .4s;
  z-index: 20;
}

#new-header .new-wrapper nav ul li {
  margin-bottom: 30px;
}

#new-header .new-wrapper nav ul li a {
  color: #fff;
}

#new-header .new-wrapper .ham {
  position: relative;
  width: 80px;
  height: 80px;
  z-index: 20;
}

#new-header .new-wrapper .ham span {
  position: absolute;
  left: 25px;
  background-color: #333;
  height: 2px;
  width: 30px;
  transition: all .6s;
}

#new-header .new-wrapper .ham span:nth-child(1) {
  top: 30px;
}

#new-header .new-wrapper .ham span:nth-child(2) {
  top: 39px;
}

#new-header .new-wrapper .ham span:nth-child(3) {
  bottom: 30px;
}

#new-header .new-wrapper .mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  transition: all .6s ease-in;
  margin-left: -300px;
  opacity: 0;
  z-index: 10;
}

#new-header.open .new-wrapper nav {
  opacity: 1;
}

#new-header.open .new-wrapper .mask {
  margin-left: 0;
  opacity: 1;
}

#new-header.open .new-wrapper .ham span:nth-child(1) {
  transform: translateY(9px) rotate(315deg);
}

#new-header.open .new-wrapper .ham span:nth-child(2) {
  opacity: 0;
}

#new-header.open .new-wrapper .ham span:nth-child(3) {
  transform: translateY(-9px) rotate(-315deg);
}

@media screen and (max-width: 768px) {
  .header-move .mv {
    height: calc(150vh - 80px);
    margin-top: 80px;
  }
}

js

※ハンバーガーメニューを押下するとheaderタグにclass=”open”が付与されます。 ※ページ内スムーズスクロールはヘッダーの高さがある場合、topからマイナスします。

          $(function(){
  /*=================================================
  ハンバーガーメニューのクリックイベント
  ===================================================*/
  $('.ham').on('click', function() {
    if (!$('#new-header').hasClass('open')) {
      $('#new-header').addClass('open');
    } else {
      $('#new-header').removeClass('open');
    }
  });

  // .maskのエリアをクリックした時にメニューを閉じる
  $('.mask').on('click', function() {
    $('#new-header').removeClass('open');
  });

  // リンクをクリックした時にメニューを閉じる
  $('nav a').on('click', function() {
    $('#new-header').removeClass('open');
  });

  /*=================================================
  ページ内スムーズスクロール
  ===================================================*/
  // ページ内リンクのイベント
  $('a[href^="#"]').click(function(){
    // リンクを取得
    let href= $(this).attr("href");
    // ジャンプ先のid名をセット
    let target = $(href == "#" || href == "" ? 'html' : href);
    // トップからジャンプ先の要素までの距離を取得
    // ヘッダーの高さがある場合はtopからマイナスする
    let position = target.offset().top - 80;
    // animateでスムーススクロールを行う
    // 600はスクロール速度で単位はミリ秒
    $("html, body").animate({scrollTop:position}, 600, "swing");
    return false;
  });
});

ダミーセクション01

ダミーセクション02

ダミーセクション03