WordPressのドロワーメニューをCSSだけで実装するものに変更しました。

Jul 10, 2020
Jul 10, 2020
WordPress

Twitter

Facebook

Pocket

はてなブックマーク

こんにちは。先日プチリニューアルした中で実装したドロワーメニューをご紹介しましたが、ちょっと思うところあってもう変更しちゃいました（笑）jQueryを利用したものからCSSだけで実装するものに変更しましたので簡単にご紹介したいと思います。

WordPressの自作テーマを少しだけカスタマイズしました。

久しぶりにWordPressの自作テーマをカスタマイズしました。

参考にしたサイト

ググってみるとCSSだけで実装する方法はたくさん出てきますが、そのほとんどがinput要素を使った方法です。type属性でcheckboxを指定し、チェックのオンとオフでドロワーメニューを開いたり閉じたりする挙動を切り替えるみたいなやり方です。

CSSだけで簡単にドロワーメニュー(ハンバーガーメニュー)を作る - Qiita

最初に見つけた時にはほとんど理解できませんでしたが、色々と見た後にまた読んだら実はめちゃくちゃ分かりやすく書いてあったという何だか不思議な体験をした記事でした。ベースはこちらで解説されているものを流用しつつ、例のごとくクラス名等を自分なりに変更した感じです。

HTML

あくまでも私の場合なのでやっぱり汎用性はないと思いますが、ご参考までに。

/* チェックボックス（非表示） */
<input type="checkbox" id="checkbox" class="checkbox">

/* ハンバーガーアイコン部分 */
<label class="toggle" for="checkbox"><span></span></label>

/* メニューを開いた時の暗転する背景部分 */
<label class="overlay" for="checkbox"></label>

/* 右側から出てくるドロワー部分 */
<nav class="global_navi">
    <h3 class="navi_title">navigation</h3>
    <?php wp_nav_menu(array(
        'theme_location'=>'mainmenu',
        'container'     =>'',
        'menu_class'    =>'',
        'items_wrap'    =>'<ul class="page_navi">%3$s</ul>'));
    ?>

input type="checkbox"とハンバーガーアイコン部分のlabel要素と暗転用背景のlabel要素をfor="checkbox"で関連付けて、チェックボックスは非表示にしておきます。その下にはドロワー部分のnav要素が来ます。

CSS

まずはハンバーガーアイコン部分と暗転する背景部分のCSSです。

.checkbox {
    display: none;
}

.toggle {
    position: fixed;
    top: 19px;
    right: 19px;
    z-index: 40;
    display: block;
    width: 24px;
    height: 18px;
    cursor: pointer;
}

.toggle span,
.toggle span::before,
.toggle span::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: auto;
    width: 24px;
    height: 2px;
    background-color: #fff;
    transition: all .4s;
}

.toggle span::before,
.toggle span::after {
    content: "";
}

.toggle span::before {
    top: 16px;
}

.toggle span::after {
    top: -16px;
}

.checkbox:checked ~ .toggle span,
.checkbox:checked ~ .toggle span::before,
.checkbox:checked ~ .toggle span::after {
    background-color: #fff;
}

.checkbox:checked ~ .toggle span {
    background: transparent;
}

.checkbox:checked ~ .toggle span::before {
    top: 0;
    transform: rotate(-45deg);
}

.checkbox:checked ~ .toggle span::after {
    top: 0;
    transform: rotate(45deg);
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 20;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    transition: all .4s;
    pointer-events: none;
}

.checkbox:checked ~ .overlay {
    opacity: .6;
    pointer-events: auto;
}

前回ご紹介したハンバーガーアイコンはspan要素を文字通り3本重ねて実装していましたが、今回は::beforeと::afterの疑似クラスを利用して3本線を表現しています。基本的な考え方は一緒なので扱いやすいですね。

.global_navi {
    position: fixed;
    top: 0;
    right: -320px;
    z-index: 30;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: 320px;
    height: 100vh;
    background-color: rgba(42, 42, 42, .9);
    transition: all .4s;
}

.checkbox:checked ~ .global_navi {
    right: 0;
}

.navi_title {
    margin: 75px 24px 19px;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
}

.page_navi li {
    text-transform: uppercase;
    font-size: 14px;
}

.page_navi li a {
    display: block;
    padding: 21px 24px;
}

.page_navi li a:link,
.page_navi li a:visited {
    color: #fff;
}

.page_navi li a:hover,
.page_navi li a:active {
    background-color: #fff;
    color: #000;
}

続いてはグローバルメニューの方です。最初はright: -320px;で画面外に出しておいて、チェックを入れるとright: 0;で画面上にニュルッと出てくるようになっています。その他は特に難しいことはしていません。

最後に

前回ご紹介したドロワーは、ドロワーの動きに連動して画面全体が左にずれるという挙動を実装したかったので、コンテンツ全体をwrapperで囲んでいましたがこれがどうも気に入りませんでした。動きのためだけに余計なコードを付与するのが何となくモヤモヤしてしまったので止めました。ついでにjQueryを使わない方法もよくよく理解できればそんなに難しいことはしていなかったので実装しました。今回は細部までこだわったので大満足です。