【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;
        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で作成する超シンプルなドロワーメニューのテンプレートのご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍