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

実装の問題点と解消法とは？

次に問題点と解消法をご紹介します( ˇωˇ )

横に傾けたときの問題

iOSでスクロールをした際に、ヘッダーの検索ボックスが変わってしまうためresizeイベントが発火してしまう現象がおきました。
傾いたときのイベントを取りたいなら、resizeではなくてorientationchangeを使います( ˇωˇ )

修正前

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

修正後

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

メニューを開いたまま傾けたときの、Windowの高さ処理も入れてあげましょう( ˇωˇ )

//6.開いたままスマホを傾けたとき
$window.on('orientationchange', function () {
    if($accordion.hasClass('is-open')){
        if(navHeight > windowHeight) {
            //wrapperの高さnavの高さにする
            $wrapper.height(navHeight + HEADER_HEIGHT);
            $jsCover.height(navHeight + HEADER_HEIGHT);
        } else {
            //wrapperの高さwindowの高さと同じにする
            $wrapper.height(windowHeight);
            $jsCover.height(windowHeight);
        }
    }
});

Windowの高さが狭かったときの対応

横に傾けたとき、ナビゲーションの幅よりWindowの高さが狭くなり、その分overflowでナビゲーションが見えなくなってしまうことがあります。
傾けてメニューを開いた際のWindowの高さを、if文で比較してあげて高さを設定してあげましょう( ˇωˇ )

修正前

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

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

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

修正後

//3.開くときの動き
function openAction(){
    //クラスをつける
    $accordion.addClass('is-open');
    //windodwの高さがナビゲーションより高さが狭いとき
    if(navHeight > windowHeight){

        //wrapperの高さnavの高さにする
        $wrapper.css({overflow:'hidden'}).height(navHeight + HEADER_HEIGHT);

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

    } else {

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

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

まとめ

いかがでしたでしょうか？？
スマホでちょいとつまずいた部分は高さの変動とイベントの使い方でした。
今後とも問題点がすんなり解消できるように精進していきたいですね( ˇωˇ )

完成されたアコーディオンはこちらでご確認いただけます。
( ˘ω˘)☞三☞ｼｭｯｼｭｯ　Demo

JSの書き方などに何かありましたら、ご意見ただけると幸いです( ˇωˇ )

ではでは。

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