
レスポンシブWebデザイン時に役立つアコーディオンメニュー
2015年1月6日jQueryのみでつくるギミック
レスポンシブWebデザインをする際、画面が狭くなった時にPCモニタサイズ用に用意していた横並びのメニューを非表示にして、折り畳み式のメニューに切り替えることもあると思うので、そういったケースで役立ちそうなアコーディオン式のメニューを作りました。
今回は切り替えスイッチ部分のメニューとクローズのアイコンをそれぞれCSSで作りましたが、背景画像で実装することも可能です。
JavaScript
(function($){ $(function() { $('#menu .switch').on('click', function() { $(this).next().slideToggle(300); $(this).toggleClass('active'); }); }); })(jQuery);
HTML
<div id="container"> <div id="menu"> <div class="switch"></div> <ul class="nav"> <li><a href="javascript:void(0);">menu01</a></li> <li><a href="javascript:void(0);">menu02</a></li> <li><a href="javascript:void(0);">menu03</a></li> </ul> </div> </div>
CSS
#container { max-width: 1024px; margin: 0 auto; padding: 0 30px; } #menu .switch { position: relative; width: 30px; height: 30px; cursor: pointer; margin-left: auto; } #menu .switch:before { content: ""; position: absolute; border-top: 5px solid #ff5b6b; border-bottom: 15px double #ff5b6b; width: 30px; height: 5px; } #menu .active:before, #menu .active:after { content: ""; position: absolute; left: 13px; top: 0; border: 0; background-color: #ff5b6b; width: 5px; height: 25px; transform: rotate(45deg); } #menu .active:after { transform: rotate(-45deg); } #menu .nav { display: none; } #menu a { display: block; margin-bottom: 1px; padding: 12px; background-color: #ff5b6b; color: #ffffff; text-decoration: none; text-align: center; }