ハンバーガーメニュー

なんだかんだ言っても、

ECサイトや企業サイトではなく、個人のページとか、単純な作りのページであれば

まだまだハンバーガーメニューは有効だと思うのです。

「ハンバーガーメニューはクソ」とか言われてた頃に比べて、浸透度も高まってるだろうし。

仕様

• 右上に固定
• クルッと回ってバツになる、それを丸で囲う
• メニューをクリックしてジャンプしたらデフォルトの非表示状態に戻る

HTML

<nav>
<a class="menu-trigger">
  <span></span>
  <span></span>
  <span></span>
</a>
<ul class="navmenu">
	<li><a href="#">top</a></li>
	<li><a href="#menu1">menu1</a></li>
	<li><a href="#menu2">menu2</a></li>
	<li><a href="#menu3">menu3</a></li>
	<li><a href="#menu4">menu4</a></li>
</ul>
</nav>

CSS

.menu-trigger {
	position: fixed;
	top:14px;
	right:24px;  
	width: 30px;
	height: 26px;
	z-index: 999;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

.menu-trigger span {
  position: absolute;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 14px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
/***hover**/
.menu-trigger:not(.active):hover span:nth-of-type(1) {
  top: 3px;
}
.menu-trigger:not(.active):hover span:nth-of-type(3) {
  bottom: 3px;
}
/***動き***/
.menu-trigger span:nth-of-type(2) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(12px) rotate(-315deg) scale(.8);
  transform: translateY(12px) rotate(-315deg) scale(.8);
}
.menu-trigger.active span:nth-of-type(2) {
  width: 34px;
  height: 34px;
  background-color: transparent;
  border: 1px solid #333;
  border-radius: 50%;
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-12px) rotate(315deg) scale(.8);
  transform: translateY(-12px) rotate(315deg) scale(.8);
}
nav ul{
display:none;
position: fixed;
top:0;
right:0;
height:100vh;
max-height:400px;
width:600px;
max-width: 600px;
z-index: 100;
background-color:rgba(255,255,255,0.85);
}

jQuery

$(function(){
//ハンバーガーメニュー
    $(".menu-trigger").on("click", function() {
        $(this).toggleClass("active");
        $(this).next("ul").slideToggle();
    });

//メニューを選択したら閉じる
    $('.navmenu li a').click(function() {
	$('nav ul').hide();
	$('.menu-trigger').removeClass("active")　
	});
	$('nav').click(function() {　event.stopPropagation();　});
});

参考

www.nxworld.net
www.misallychan.com

おまけ

スムーススクロール

jQuery

• #をダブルクォーテーションで囲いましょう。

$(function(){
   $('a[href^="#"]').click(function() {
      var speed = 800; 
      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;
   });
});

参考

sotodeyo.hateblo.jp