humberger menu の実装方法

（posted at: 2016-02-22）

SP サイトで humberger menu を実装するためのCode。

humberger menu を実装したのでそのソースを防備録として残しておく。

humberger menu を実装するためのレスポンシブコード

header 内の script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
    $(function() {
        var $header = $('header');
        // Nav Fixed
        $(window).scroll(function() {
            if ($(window).scrollTop() > 350) {
                $header.addClass('fixed');
            } else {
                $header.removeClass('fixed');
            }
        });
        // Nav Toggle Button
        $('#nav-toggle').click(function(){
            $header.toggleClass('open');
        });
    });
})(jQuery);
</script>

つまり、#nav-toggle にメニュー（画像）を配置しておき、クリックで header に “open” class を付与する。デザインはCSSで実装。

HTML の記述例

<div id="nav-toggle" class="sp_only">MENU</div>
<nav id="gnav">
<ul>
<li id="menu1"><a href="menu1.html">menu1</a></li>
<li id="menu2"><a href="menu2.html">menu2</a></li>
<li id="menu3"><a href="menu3.html">menu3</a></li>
<li id="menu4"><a href="menu4.html">menu4</a></li>
<li id="menu5"><a href="menu5.html">menu5</a></li>
</ul>
</nav>

CSS の記述例

.sp_only {
	display: none;
}
@media only screen and (max-width: 480px) {
 #nav-toggle {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 40px;
        height: 40px;
        background: url(../images/menu_icon.png) left top no-repeat; /* 40*40size */
        text-indent: -9999px
    }
header.open #nav-toggle {
    background: url(../images/menu_icon_close.png) left top no-repeat !important;
}
#gnav { /* 開いてないときは画面外に配置 */
    position: absolute;
    top: -500px;
    background: transparent;
    width: 100%;
}
header.open #gnav  { /* #global-nav スライドアニメーション */
  -moz-transform: translateY(500px); /* #global-nav top + #mobile-head height */
  -webkit-transform: translateY(500px);
  transform: translateY(500px);
}
#menu1 a,
#menu2 a,
#menu3 a,
#menu4 a,
#menu5 a {
	width: 100%;
	text-indent: 0 !important;
}
}