スライドメニュー備忘録
ここからスタートした方がやりやすい。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title></title> <style> body { position: relative; left: 0; overflow-x: hidden; } #slide_menu{ position: fixed; top: 0; left: -240px; width: 240px; height: 100%; background: #E87272; overflow-y: auto; } #button { width: 30px; height: 25px; position: relative; cursor: pointer; } #button .bar { display: inline-block; width: 30px; height: 3px; background-color: #ff5b6b; position: absolute; left: 0; transition: .15s ease-in-out; } #bar01 { top: 0; } #bar02 { top: 10px; } #bar03 { top: 20px; } .active #bar01 { top: 10px; transform: rotate(45deg); } .active #bar02 { width: 0; } .active #bar03 { top: 10px; transform: rotate(-45deg); } </style> </head> <body> <!-- スライドメニュー部分--> <nav id="slide_menu"> <ul> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> <!--メニューを出すボタン--> <div id="button"> <span class="bar" id="bar01"></span> <span class="bar" id="bar02"></span> <span class="bar" id="bar03"></span> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(function(){ var menu = $('#slide_menu'), // スライドインするメニューを指定 menuBtn = $('#button'), // メニューボタンを指定 body = $(document.body), menuWidth = menu.outerWidth(); // メニューボタンをクリックした時の動き menuBtn.on('click', function(){ // body に open クラスを付与する body.toggleClass('open'); if(body.hasClass('open')){ // open クラスが body についていたらメニューをスライドインする body.animate({'left' : menuWidth }, 300); menu.animate({'left' : 0 }, 300); } else { // open クラスが body についていなかったらスライドアウトする menu.animate({'left' : -menuWidth }, 300); body.animate({'left' : 0 }, 300); } }); }); (function($){ $(function() { $('#button').on('click', function() { $(this).toggleClass('active'); }); }); })(jQuery); </script> </body> </html>