【CSS + jQuery】 ハンバーガーメニュー作成

ハンバーガーメニューはCSSのみでもできますが、
コード量が増えてしまうので、個人的にはCSS + jQueryが一番すっきりしておすすめです。

実務では下記パターンをよく使うのでまとめておきます。

全画面 + フェードで表示

See the Pen
eYzgqEG by momoi (@momoi)
on CodePen.

＜jQuery側＞
ハンバーガーメニューをクリックすると、is-openクラスをbodyに追加。
閉じるボタンをクリックすると、is-openクラス削除。

＜CSS側＞
bodyにis-openクラスがあるかないかでメニュー表示を制御する。
#nav-contentを初期非表示に。
is-openクラスが追加されたら表示させる。

/* 位置を右上に固定 */
#toggle {
    position: fixed;
    top: 25px;
    right: 25px;
}
/* ハンバーガーメニューの大きさ指定 */
#toggle-box {
    position: relative;
    width: 36px;
    height: 32px;
    cursor: pointer;
}
#toggle-box > span {
  width: 100%;
  height: 1px;
  left: 0;
  display: block;
  background: #000;
  position: absolute;
  transition: transform .6s ease-in-out;
}
#toggle-box > span:nth-child(1) {
    top: 0;
}
#toggle-box > span:nth-child(2) {
    top: 50%;
    transform: translatey(-50%);
}
#toggle-box > span:nth-child(3) {
    bottom: 0;
}

/* ハンバーガーメニュークリックで、「×」マークにアニメーション */
.is-open #toggle-box > span {
    background: #fff;
}
.is-open #toggle-box > span:nth-child(1) {
  top: 50%;
  transform: rotate(45deg) translatey(-50%);
}
.is-open #toggle-box > span:nth-child(2) {
  width: 0;
}
.is-open #toggle-box > span:nth-child(3) {
  top: 50%;
  transform: rotate(-45deg) translatey(-50%);
}

/* 重なり順指定 */
#toggle {
    z-index: 1000;
}
#main {
    position: relative;
    z-index: 990;
}

/* 中身メニュー、初期は非表示 */
#nav-content {
    z-index: 900;
    overflow: auto;
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0;
    transition: opacity .6s ease, visibility .6s ease;
}
#nav-content ul {
  list-style: none;
}
#nav-content a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 30px 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
#nav-content a:hover {
  opacity: 0.6;
}

/* is-openクラスが追加されると、メニューが表示される */
.is-open {
    overflow: hidden;
}
.is-open #nav-content {
  z-index: 999;
  visibility: visible;
  opacity: 1;
}
.is-open #nav-content a{
  pointer-events: auto;
}

全画面 + 横からスライド表示

See the Pen
JjKEgQz by momoi (@momoi)
on CodePen.

仕組みはさっきとほとんど同じ。

違う部分のみ抜粋。

/* 初期表示では右画面外にスライドさせておく */
#nav-content {
  transform: translateX(100%);
}
/* is-openクラスが追加されたら、スライドを戻す */
.is-open #nav-content {
  transform: translateX(0);
}

ちなみにこのパターンは右からスライドが出てきますが、
上から出てくるパターン、左から出てくるパターンに応用可能です。

左から出てくるパターン

/* 初期表示では左画面外にスライドさせておく */
#nav-content {
  transform: translateX(-100%);
  top: 0;
  left: 0;
}
/* is-openクラスが追加されたら、スライドを戻す */
.is-open #nav-content {
  transform: translateX(0);
}

上から出てくる出てくるパターン

/* 初期表示では上画面外にスライドさせておく */
#nav-content {
  transform: translateY(-100%);
  top: 0;
  left: 0;
}
/* is-openクラスが追加されたら、スライドを戻す */
.is-open #nav-content {
  transform: translateY(0);
}

半分画面 + 横からスライド表示

・ハンバーガーメニューを開くと、背景を暗く透過する。
・透過部分をクリックしても、メニューが閉じる仕組み。

See the Pen
Bazxzvb by momoi (@momoi)
on CodePen.

＜jQuery側＞
is-openクラス追加に加えて、mainにoverlayクラスを追加。
これで背景透過部分を制御する。

＜CSS側＞
スライドなので先ほどのパターンと同じ。

/* 幅はここで自由に変更 */
#nav-content {
  width: 50%;
}
/* 透過指定 */
.overlay {
  background: rgba(0,0,0,0.5);
  height: 100vh;
}