スマホなんかでは必ずと言っていいほどよく使われる「三」の形をしたあれです。
クリックするとくるっと回転して「x」になるちょっと見栄えのいいヤツの作例を載せます。
時と場合にもよりますが、アドリブでこういうの入れとくとお客さんに結構喜ばれます。
HTML部分
<div id="sp-navi"><a href="javascript:void(0);" id="panel-btn"><span id="panel-btn-icon"></span></a></div>
WordPressなんかでやる場合は、よくis_mobileでif文に入れてスマホのみで表示されるようにしてます。
<?php if(is_mobile()): ?><div id="sp-navi"><a href="javascript:void(0);" id="panel-btn"><span id="panel-btn-icon"></span></a></div><?php endif; ?>
CSS部分
この例ではメディアクエリでスマホのみにスタイルを設定。
その他のデバイス用で表示させたくない場合には、ブレークポイント切って#sp-naviにdisplay:noneを指定しておいてください。
@media (max-width:478px) {
#sp-navi{
display: block;
position: absolute;
top: 0;
right: 0;
}
#panel-btn{
display: inline-block;
position: relative;
width: 50px;
height: 50px;
margin: 0px;
}
#panel-btn-icon{
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 25px;
height: 3px;
margin: -1px 0 0 -15px;
background: #000;
transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 25px;
height: 3px;
background: #000;
transition: .3s;
}
#panel-btn-icon:before{
margin-top: -10px;
}
#panel-btn-icon:after{
margin-top: 6px;
}
#panel-btn .close{
background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
margin-top: 0;
}
#panel-btn .close:before{
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
}
Javascript (jQuery)
jQuery前提の書き方になってるので、jQueryを予め読み込んでおいてください。
jQueryなくてもできるかと思いますが、僕はもうjQuery依存症なのであしからず。。
(function($){jQuery.event.add(window, "load", function(){
//hamburger menu
$("#panel-btn").click(function() {
$("nav").slideToggle();
$("#panel-btn-icon").toggleClass("close");
return false;
});
})})(jQuery);
これで動くはず。
動かなかったら、教えて下さい。
コメント