スマホサイトに特化したアコーディオンメニューを作ってみた

JavaScriptの実装をしよう

下準備ができたところで、JavaScriptを実装していきます。

変数の設定

変数を設定していきます。

アコーディオン用の変数

それぞれセレクタと高さの変数を用意します。

//1.アコーディオン用の変数
var $window = $(window),
    $wrapper = $('#wrapper'),
    $accordion = $('#js-accordion'),
    $menuButton = $(".menu-button"),
    $jsCover = $('#js-cover'),
    $nav = $('.nav-content'),

    //ナビゲーションの高さ
    navHeight = $nav.height(),

    //アニメーションの速度
    SPEED = 300,

    //wrapperの高さを取得
    bodyHeight = $wrapper.height(),

    //ヘッダータイトルの高さ
    HEADER_HEIGHT = 65;

全体のWindowサイズとWrapperのサイズを常に取得できる状態にする

アコーディオンを実装するにあたり、アコーディオン表示以上にスクロールをさせないようにしましょう。あらかじめWindow全体の高さとDomの高さを保持できるようにします( ˇωˇ )

//2.リサイズ時でも変動可能なグローバル変数
$window.on('load resize', function() {
    //ウィンドウの高さを取得
    windowHeight = $window.height();
});

開いたときと閉じたときの動きを用意しよう

次にCSSで用意したクラスのアニメーションとスクロールの制御する関数を用意します( ˇωˇ )

開くときの動き

クラスをつけて、アコーディオンが出てきた際にbodyの高さを固定して暗い背景を表示します( ˇωˇ )

//3.開くときの動き
function openAction(){
    //クラスをつける
    $accordion.addClass('is-open');

    //wrapperの高さwindowの高さと同じにする
    $wrapper.css({overflow:'hidden'}).height(windowHeight);

    //高さをつけてオーバーレイを表示
    $jsCover.height(windowHeight).stop().animate({opacity:1},SPEED);
}

閉じるときの動き

クラスを外したときに、はじめに保持したbodyの高さを付け直して元通りにします( ˇωˇ )

//4.閉じるときの動き
function closeAction(){
    //クラスを外す
    $accordion.removeClass('is-open');

    //wrapperの高さを元にもどしてスクロールできるようにする。
    $wrapper.css({overflow:'visivle'}).height(bodyHeight);

    //オーバーレイが消える
    $jsCover.stop().animate({opacity:0},SPEED);
}

クリックイベントを用意する

最後にクリックイベントをつけます。
クラスがあれば閉じる動きのcloseAction();が起動、クラスがなかったら開く動きのopenAction();が起動します( ˇωˇ )

//5.クリックイベント
    $menuButton.on('click',function(){
        //open用のクラスがあるかどうか判定
        if($accordion.hasClass('is-open')){
            //閉じるときの動き
            closeAction();
        } else {
            //開くときの動き
            openAction();
        }
    });

あれ？　これでできたかな？？？
ぱっと見、完璧なようですが問題がありました。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。