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

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

はやち

はやち

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

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

横に傾けたときの問題

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サイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL