ハンバーガーメニューの作り方

ハンバーガーメニューは、スマホ用サイトでよく右上などに見られる三本線のメニューボタンことです。

jQueryを使用したハンバーガーメニュー

jQueryを使用するのでまずはjQueryを読み込む。

<script src="jQueryのあるURL"></script>
表示用のHTML記述

<div class="nav_toggle">
    <span></span><span></span><span></span>
</div>
jQuery実行コード用のHTML記述

<script>
$(function() {
    $('.nav_toggle').click(function() {
        $(this).toggleClass('active');
    });
});
</script>
CSS記述

.nav_toggle {
    display: block;
    position: relative;
    right: 2px;
    top: 0;
    width: 42px;
    height: 48px;
    cursor: pointer;
    z-index: 3;
    text-align: center;
}
.nav_toggle span {
    display: block;
    position: absolute;
    width: 30px;
    border-bottom: solid 3px #555555;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}
.nav_toggle span:nth-child(1){top:9px;}
.nav_toggle span:nth-child(2){top:18px;}
.nav_toggle span:nth-child(3){top:27px;}
.nav_toggle span:nth-child(4) {
    border: none;
    color: #eee;
    font-size: 9px;
    font-weight: bold;
    top: 34px;
}
.nav_toggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.nav_toggle.active span:nth-child(2),
.nav_toggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.nav_toggle::after {
  position: absolute;
  left: 0;
  bottom: 2px;
  content: 'MENU';
  width: 100%;
  color:#555555;
  font-size: 10px;
}
.nav_toggle.active::after {
  content: 'CLOSE';
  bottom: 2px;
}
表示例。クリックで変わります。

TOPへ
戻る