タブ/アコーディオン切り替えjQueryを幅100%にしたメモ

どうも。お久しぶりです。

17.04.30追記:「そっか、最初っから全部パーセンテージで設定すればいいやん...」と気づき修正。

17.05.02追記: 書き忘れてましたが当然HTMLの方も項目を増やしてあげる必要があります。

最近はEC-CUBEなんぞをいじっており、jQueryのスクリプトを設置したりしていちいち感動しております。まだまだそんなレベルの技術。

今日はその際ちょっと苦労した部分を書いてみようと思います。使わせていただいたのはこちらのコード一式。いやぁ素晴らしい。

- スポンサードリンク -

PCでの表示を100%にしたい

幅いっぱいに表示させたかったので#tabAccordionのwidthを100%に。CSSの600pxの部分を100%にしてあげます。


#tabAccordion {
    margin: 0 auto;
    width: 100%;
    height: 400px;
    font-size: 12px;
    border: #999 1px solid;
    position: relative;
}
 
#tabAccordion dl {
    top: 0;
    left: 0;
    width: 100%;
    position: absolute;
}

「やった!これで幅いっぱいだ!」と思いきや、タブの幅も固定なので変える必要あり。ここからが手間のかかるポイント。

タブの数も増やしたい

設置したい項目が7つあり、デフォルトの5つに2つ足すことに。レスポンシブなので幅をパーセントで指定してあげます。100÷7...なんとも中途半端な数字。ここに倍数を足していきます。ああ苦手な計算!でも電卓があるから大丈夫。


#tabAccordion dl:nth-child(2) dt {
    left: 14.2857143%;
}
 
#tabAccordion dl:nth-child(3) dt {
    left: 28.5714286%;
}
 
#tabAccordion dl:nth-child(4) dt {
    left: 42.8571429%;
}

#tabAccordion dl:nth-child(5) dt {
    left: 57.1428572%;
}

#tabAccordion dl:nth-child(6) dt {
    left: 71.4285715%;
}  

#tabAccordion dl:nth-child(7) dt {
    left: 85.83%;

}

85.7142858%で「計算通り!」と思いきやこれだとズレが。右端で帳尻を合わすべく85.8%にしてみるとEdgeではぴしゃりと合うんですけどまたもFirefoxとChromeでズレが。85.9%にすると今度ははみだしてしまう。そして微調整に微調整を重ねついに見つけましたぴったりの数字!85.83%でございます。

こんな感じで増やしたいだけ増やしましょう。

次はタブレットとか向けの表示部分。


@media only screen and (max-width: 800px) {
    #tabAccordion {
        width: 100%;
        box-sizing: border-box;
    }

    #tabAccordion dl {
        width: 100%;
        box-sizing: border-box;
    }

    #tabAccordion dl dt {
        width: 14.2857143%;
    }
 
    #tabAccordion dl:nth-child(2) dt {
        left: 14.2857143%;
    }

    #tabAccordion dl:nth-child(3) dt {
        left: 28.5714286%;
    }

    #tabAccordion dl:nth-child(4) dt {
        left: 42.8571429%;
    }

   #tabAccordion dl:nth-child(5) dt {
        left: 57.1428572%;
    }

    #tabAccordion dl:nth-child(6) dt {
        left: 71.4285715%;
    }

    #tabAccordion dl:nth-child(7) dt {
        left: 85.83%;
    }

スマホ表示も忘れず

アコーディオンの数も増やしておきましょう。


    #tabAccordion dl:nth-child(2) dt,
    #tabAccordion dl:nth-child(3) dt,
    #tabAccordion dl:nth-child(4) dt,
    #tabAccordion dl:nth-child(5) dt,
    #tabAccordion dl:nth-child(6) dt,
    #tabAccordion dl:nth-child(7) dt  {
        left: auto;
    }

これでスマホ表示でもメニューが増えてくれます。

- スポンサードリンク -