なんだかんだ言っても、
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>
.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;
}
.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%;
transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.menu-trigger.active span:nth-of-type(1) {
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) {
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);
}
$(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(); });
});
おまけ
スムーススクロール
$(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;
});
});
