ハンバーガーメニュー(かんたんな動き付き)

HTML / CSS
この記事は約4分で読めます。
スポンサーリンク

スマホなんかでは必ずと言っていいほどよく使われる「三」の形をしたあれです。
クリックするとくるっと回転して「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);

これで動くはず。
動かなかったら、教えて下さい。

コメント

タイトルとURLをコピーしました