超・便利技！CSS3を使ったハンバーガーメニューの作り方

スマホファーストが求められる昨今ではハンバーガーメニューを利用してナビゲーションが必要不可欠になっています。今回はハンバーガーメニューの簡単な実装方法について纏めてみました。

ポイント

• ハンバーガーメニューの三本線を利用して、バツボタンに変形させる
• ハンバーガーメニュー内の要素だけをスクロールさせる

デモ

See the Pen DrawerMenu by Yoshitaka Ise (@isystk) on CodePen.

作り方

HTML

<div id="wrapper">
  <div class="header">
    <h1 class="head-logo">ドロワーメニュー</h1>
    <nav class="nav">
      <figure></figure>
      <figure></figure>
      <figure></figure>
    </nav>
    <div id="menu">
      <div class="menu-header"></div>
      <nav>
        <ul>
          <li><a href="#">メニュー1</a></li>
          <li><a href="#">メニュー2</a></li>
          <li><a href="#">メニュー3</a></li>
          <li><a href="#">メニュー4</a></li>
          <li><a href="#">メニュー5</a></li>
          <li><a href="#">メニュー6</a></li>
          <li><a href="#">メニュー7</a></li>
          <li><a href="#">メニュー8</a></li>
          <li><a href="#">メニュー9</a></li>
          <li><a href="#">メニュー10</a></li>
        </ul>
      </nav>
    </div>
    <div id="layer-panel"></div>
  </div>
</div>

css

#wrapper {
width: 100%;
height: 100%;
margin: 0 auto;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #343b3e;
}
.header .head-logo {
color: #fff;
font-size: 1.3em;
padding-left: 10px;
}
.header .nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
z-index: 9999;
line-height: 0;
}
.header .nav {
cursor: pointer;
right: 20px;
width: 26px;
height: 22px;
}
.header .nav figure {
position: absolute;
margin:0;
left: 0;
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: 0.25s;
}
.header .nav figure:nth-child(1) {
top: 0;
}
.header .nav figure:nth-child(2) {
top: 50%;
margin-top: -1px;
}
.header .nav figure:nth-child(3) {
bottom: 0;
}
.header .nav.on figure {
background-color: #000;
}
.header .nav.on figure:nth-child(1) {
top: 50%;
margin-top: -1px;
transform: rotate(45deg);
}
.header .nav.on figure:nth-child(2) {
background: transparent;
}
.header .nav.on figure:nth-child(3) {
bottom: 50%;
margin-bottom: -1px;
transform: rotate(-45deg);
}
#menu {
position: fixed;
top: 0;
right: -340px;
max-width: 300px;
width: 80%;
height: 100%;
transition: left .5s, right .5s;
background-color: #fff;
overflow-y: auto;
height: 100%;
-ms-overflow-style: none;
scrollbar-width: none;
z-index: 999;
}
#menu::-webkit-scrollbar {
display:none;
}
#menu .search input[type="search"] {
width: 95%;
}
#menu .menu-header {
position: fixed;
height: 60px;
width: 100%;
background-color: #fff;
z-index: 1;
}
#menu nav ul {
margin: 60px 0 0 0;
padding: 0;
}
#menu nav li {
list-style: none;
padding-bottom: 10px;
}
#menu nav li a {
border-bottom: 1px solid #d2d0d0;
padding: 12px 20px;
font-size: 0.8em;
color: #999;
display: block;
position: relative;
}
#menu.open {
right: 0;
}
#menu .menu-close-btn {
padding: 5px;
float: right;
zoom: 1.5;
}
#layer-panel {
display: none;
z-index: 99;
background: #666;
opacity: 0.5;
width: 100%;
height: 100%;
position: fixed;
top: 0;
}
#layer-panel.on {
display: block;
}

javascript

var nav = document.querySelector('nav');
var menu = document.querySelector('#menu');
var layerPanel = document.querySelector('#layer-panel');

var toggleMenu = () => {
  if(nav.classList.contains('on')){
    nav.classList.remove('on');
    menu.classList.remove('open'); layerPanel.classList.remove('on');
  }else{
    nav.classList.add('on');
    menu.classList.add('open');
    layerPanel.classList.add('on');
  }
};

nav.addEventListener('click', toggleMenu);
layerPanel.addEventListener('click', toggleMenu);