【JavaScript】超シンプルなドロワーメニューのテンプレート

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで超シンプルなドロワーニューのテンプレートをご紹介しています。ライブラリ等は使用していないため、軽量でカスタマイズも容易です。ドロワーメニュー本体だけのテンプレートですので、メニューコンテンツは自由に組み込むことができます。

では、解説していきます。

超シンプルなドロワーメニュー

早速ですが、下記が本記事でご紹介するドロワーメニューです。右上のハンバーガーアイコンをクリックするとドロワーメニューが開き、再度クリックすると閉じるだけのシンプルなものです。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

最低限の機能として、下記に対応しています。

ハンバーガーアイコンをクリックでドロワーメニューの開閉
ドロワーメニュー表示中はbodyのスクロールバーをhiddenに設定
コンテンツをオーバーレイしている背景をクリックするとドロワーメニューが閉じる

環境に応じて必要な機能は変わってくると思いますので、カスタマイズしてご利用ください。

超シンプルなドロワーメニューのテンプレート

前項でご紹介したドロワーメニューで使用している内容です。メニューコンテンツ部分にHTMLを挿入してご利用ください。

HTML

<!-- ハンバーガーアイコン -->
<div class="drawer__btn">
    <span></span>
    <span></span>
    <span></span>
</div>

<!-- オーバーレイ背景 -->
<div class="drawer__bg"></div>

<!-- ドロワーメニュー -->
<div class="drawer__menu">
    <!-- ここにメニューコンテンツを挿入 -->
</div>

SCSS

//変数
$drawer-menu-color: #000;
$drawer-btn-color: #555;
$drawer-bg-color: rgba(0, 0, 0, .7);
$transition-duration: .3s;

//ドロワー
.drawer {

    //ボタン
    &__btn {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10002;
        width: 70px;
        height: 70px;
        background-color: $drawer-btn-color;        
        overflow: hidden;
        cursor: pointer;
        
        span {
            display: block;
            width: 50%;
            height: 2px;
            background-color: #fff;
            
            position: absolute;
            top: 50%;
            left: 50%;
            transition: $transition-duration;
            
            &:nth-child(1) { transform: translate(-50%, -12px); }
            &:nth-child(2) { transform: translate(-50%, -50%); }
            &:nth-child(3) { transform: translate(-50%, 12px); }
        }
        
        //アクティブ時
        &.active {
            span {
                &:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
                &:nth-child(2) {transform: translate(100%, 0); opacity: 0; }
                &:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }
            }
        }
    }
    
    //メニュー
    &__menu {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10001;
        width: 300px;
        height: 100vh;
        overflow-y: auto;
        background-color: $drawer-menu-color;
        transition: $transition-duration;
        transform: translateX(100%);
        opacity: 0;

        //アクティブ時
        &.active {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    //背景
    &__bg {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        width: 100%;
        height: 100vh;
        background-color: $drawer-bg-color;
        transition: $transition-duration;
        transform: translateX(100%);
        opacity: 0;
        cursor: pointer;
        
        //アクティブ時
        &.active {
            transform: translateX(0);
            opacity: 1;
        }
    }
}

JavaScript

class Drawer {
    constructor(){
        this.bg = document.querySelector('.drawer__bg');
        this.btn = document.querySelector('.drawer__btn');
        this.menu = document.querySelector('.drawer__menu');
        this.body = document.body;
        this.active = 'active';
        this.init();
    }
    
    init(){
        this.bg.addEventListener('click', this, false);
        this.btn.addEventListener('click', this, false);
    }
    
    toggle(){
        if(!this.btn.classList.contains(this.active)){
            this.menu.classList.add(this.active);
            this.bg.classList.add(this.active);
            this.btn.classList.add(this.active);
            this.body.style.overflowY = 'hidden';
            
        } else {
            this.menu.classList.remove(this.active);
            this.bg.classList.remove(this.active);
            this.btn.classList.remove(this.active);
            this.body.style.overflowY = 'auto';
        }
    }
    
    handleEvent(event) {
        this.toggle(event);
    }
}
const drawer = new Drawer();

ここまでの内容を組み込むことで、超シンプルなドロワーメニューを実装することができます。

最後に

ドロワーメニューは随分前にjQueryで作ったことがありますが、最近はjQueryを使うこともなくなり、サイト制作時にドロワーメニューが必要な場合は一から構築するかライブラリを使うかまちまちでした。なのでざっくりとしたテンプレートがあればあれこれ考えずに済むかな、と思い本記事の内容を作成するに至りました。超シンプルなので凝った作りではないですが、カスタマイズしやすくなっていますので、よかったら使ってくださいね。

以上、JavaScriptで作成する超シンプルなドロワーメニューのテンプレートのご紹介でした！