<div id="wrapper"> <div id="contents"> <header class="clearfix"> <h1>仮ロゴ</h1> <div class="menu-switch"><i class="fa fa-bars fa-2x fa-border"></i></div> </header> <div id="main"> <p>スマホサイトで見かけることが多い、ボタンを押すと横からメニューがスルッと引き出し(ドロワー)のように出現するメニューです。「ドロワーメニュー」と呼ばれます。</p> <p>今回は、少しのJavaScriptとcssで実現する方法です。</p> </div> </div> <div class="drawer"> <ul> <li><a href="">ホーム</a></li> <li><a href="">サービス</a></li> <li><a href="">料金</a></li> <li><a href="">会社概要</a></li> </ul> </div> </div>
#wrapper { position: relative; overflow: hidden; width: 100%; background-color: #fff; } #contents { -webkit-transition: ease .3s; transition: ease .3s; } #contents.cover { -webkit-transform: tranformslateX(-300px); transform: translateX(-300px); } .drawer { position: absolute; top: 0; right: 0; width: 300px; height: 100%; -webkit-transform: translateX(300px); transform: translateX(300px); -webkit-transition: ease .3s; transition: ease .3s; } .drawer.active { -webkit-transform: tranformslateX(0); transform: translateX(0); } /* このデモ用に見た目を調整 */ header { border-bottom: 1px solid #ccc; margin-bottom: 20px; padding: 15px; } header h1 { float: left; margin: 0; } header .menu-switch { float: right; cursor: pointer; } #main { margin: 30px; } .drawer { display: none; background-color: #767676; } .drawer.active { display: block; } .drawer ul { list-style: none; margin: 0; padding: 0; } .drawer ul li a { display: block; padding: 15px; color: #fff; text-decoration: none; } .drawer ul li a:hover { background-color: #f2f2f2; color: #ff0000; } .clearfix { display: block; min-height: 1%; } .clearfix:after { clear: both; content:"."; display: block; height: 0; visibility: hidden; } * html .clearfix { height: 1%; /*\*//*/ height: auto; overflow: hidden; /**/ }
$(function() { $('.menu-switch').click(function() { // 開いているメニューがないとき if ($('.drawer.active').size() == 0) { $('.drawer').addClass('active'); $('#contents').addClass('cover'); // 開いているメニューがあるとき } else { $('.drawer').removeClass('active'); $('#contents').removeClass('cover'); } return false; }); // メニューボタン以外を押すとメニューを閉じる $('body>*:not(.drawer)').click(function() { $('.drawer').removeClass('active'); $('#contents').removeClass('cover'); }); });