なんだかんだ言っても、
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(); }); });
おまけ
スムーススクロール
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; }); });
