質問: リキッドデザインによるサイト制作を実戦で体当たり勉強中です。 jsとcssで作ったグローバルメニューについて相談させてください。 PC幅(768px以上)で横並びになっているメニューを、 ブラウザ幅を縮めてSP幅(767px以下)にした時は、 横並びメニューを一旦消して、「閉じたアコーディオンメニュー」に変更するというものを作っています。 この時に起こる挙動2点が解消できなくて悩んでいます。 1) SP幅のアコーディオンを一度開き、また閉じて、その後ブラウザをPC幅に戻すと、 PC幅で見えていた横並びメニューが消えてしまいます。 2) SP幅のアコーディオンを開いたまま、ブラウザをPC幅に戻すと、 アコーディオンがそのまま横に伸びた体裁で表示されてしまいます。 (PC幅のデザインに戻らない) 以上です。 何かtipsがあれば教えていただけたら助かります。 宜しくお願いします。
回答: PCとSP幅でのスタイルの表示・非表示の切替ができていないのではないでしょうか。 記述したコードを見ていないのでわかりませんが、CSSのメディアクエリでスタイルを切り替えているなら下記のように記述すれば、表示・非表示の設定ができます。 CSSのクラス名は仮ですが、`767px` 以下なら、`sp_nav` は表示、`pc_nav` は非表示にして、`768px` 以上なら、`sp_nav` は非表示、`pc_nav` は表示します。 ``` .sp_nav { display: block; } .pc_nav { display: none; } @media screen and (min-width : 768px) { .sp_nav { display: none; } .pc_nav { display: block; } } ```