スマホのサイトなんかにある、ハンバーガーメニューをクリックすると横からスライドして現れるメニューです。
半透明になっている黒の背景をクリックするとメニューを閉じることができます。
ソースコード
HTML
<!-- ======== nav ======== --> <nav> <div id="glaylayer"></div> <ul id="slidemenu"> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> </ul> </nav> <!-- ======== /nav ======== --> <!-- ======== main ======== --> <div class="main"> <div class="container"> <main> <button id="hamburgerbtn"> <span></span> <span></span> <span></span> <p>menu</p> </button> </main> </div> </div> <!-- ======== /main ======== -->
CSS
main { padding: 30px 0; text-align: center; } #hamburgerbtn { background: #000; color: #fff; border: none; padding: 10px 12px 8px; cursor: pointer; } #hamburgerbtn span { display: block; width: 100%; height: 4px; background: #fff; border-radius: 4px; margin-bottom: 8px; } #hamburgerbtn span:nth-of-type(3) { margin-bottom: 3px; } #slidemenu { display: none; position: fixed; top: 0; width: 70%; max-width: 400px; height: 100%; background: #333; list-style: none; } #slidemenu a { display: block; color: #fff; text-decoration: none; padding: 20px; } #slidemenu a:hover, #slidemenu a:active { background: #666; } #glaylayer { position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.3; }
JavaScript
$(function(){ //ハンバーガーボタンをクリックしたときの処理 $('#hamburgerbtn').click(function(){ $('#glaylayer:not(:animated)').fadeIn('fast'); $('#slidemenu:not(:animated)').css({ 'left' : -1*$('#slidemenu').width(), 'display' : 'block' }).animate({ 'left' : 0 },'fast'); }); //背景をクリックしたときの処理 $('#glaylayer').click(function(){ $('#glaylayer:not(:animated)').fadeOut('fast'); $('#slidemenu:not(:animated)').animate({ 'left' : -1*$(this).width() },'fast',function(){ $(this).css({ 'display' : 'none' }); }); }); });
簡単な解説
まずはHTMLとCSSでハンバーガーボタンとメニューを作ります。
このあたりはお好みで。
重要なのはメニュー(#slidemenu)の幅のサイズと画面いっぱいに表示される半透明な黒の背景(#glaylayer)です。
このサンプルでは#glaylayerをクリックしてメニューを閉じるようにするので、メニューの幅をウィンドウの幅より小さくして#glaylayerをクリックできるようにします。
メニューが完成したらdisplay:none;で非表示にして、ハンバーガーボタンをクリックしたらメニューが出てくるようにスクリプトを記述します。
メニューを横からスライドさせる処理
.click()を使ってハンバーガーボタンがクリックされたときの処理を記述します。
//ハンバーガーボタンをクリックしたときの処理 $('#hamburgerbtn').click(function(){ $('#glaylayer:not(:animated)').fadeIn('fast'); $('#slidemenu:not(:animated)').css({ 'left' : -1*$('#slidemenu').width(), 'display' : 'block' }).animate({ 'left' : 0 },'fast'); });
ハンバーガーボタンがクリックされたら.fadeIn()を使って#glaylayerを表示。
$('#glaylayer:not(:animated)').fadeIn('fast');
それと同時に#slidemenuを横からスライドさせます。
そのためにまずは#slidemenuの位置を.css()を使って#slidemenuの幅だけ左方向にずらして表示させます。
#slidemenuの幅は.width()を使って取得しています。
これでウィンドウの左側の見えない位置に#slidemenuが表示されるので、あとは.animate()を使ってleftが0になる位置までアニメーションさせれば、横からスライドして現れたように見えます。
$('#slidemenu:not(:animated)').css({ 'left' : -1*$('#slidemenu').width(), 'display' : 'block' }).animate({ 'left' : 0 },'fast');
これでハンバーガーボタンをクリックしたら背景とメニューが表示されるようになります。
背景をクリックでメニューを非表示にする処理
次は背景#glaylayerをクリックしたらメニューが非表示になる処理です。
//背景をクリックしたときの処理 $('#glaylayer').click(function(){ $('#glaylayer:not(:animated)').fadeOut('fast'); $('#slidemenu:not(:animated)').animate({ 'left' : -1*$(this).width() },'fast',function(){ $(this).css({ 'display' : 'none' }); }); });
#glaylayerをクリックしたら起こるイベントなのでここでも.click()を使います。
まずは表示のときと逆で.fadeOut()を使って#glaylayerをフェードアウトさせます。
$('#glaylayer:not(:animated)').fadeOut('fast');
それと同時に.animate()を使って#slidemenuを#slidemenuの幅だけ左に移動させます。
これも表示のときの逆ですね。
あとはアニメーションが終わったあとにメニューが非表示になるように、コールバック関数で#slidemenuを非表示すれば完了です。
$('#slidemenu:not(:animated)').animate({ 'left' : -1*$(this).width() },'fast',function(){ $(this).css({ 'display' : 'none' }); });
おわりに
スマホで見るWebサイトにはこの手のメニューが多い印象なので、使う機会は多そうです。
ハンバーガーボタンの位置を固定したり、メニューに閉じるボタンを追加してわかりやすくしたり、いろいろ変更や改良を加えて使ってみてください。
コメント