ハンバーガーメニューは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;
}