no image

スマフォ版メニュー

スマフォ版でメニューをPC版と同じように出すと、ちょっと見づらい。

そこで、よくあるハンバーガーメニューに変えてみました。

よくあるタイプなので、Google先生に聞くといろいろ教えて頂けます。

その中でも一番単純なタイプでやってみようと、先ずページを表示された時には隠れていて、トリガーになる所をクリックしたら展開するというやつです。

メニューはheader.phpに書いてあるので、まずSP版のソースを追記して、クラスでPC/SPと別けます。

次にCSSで両方のクラスを追記して、@mediaで出し分けします。

今回はページ上部に重なってメニューが出るようにするか、展開された領域を挿入して表示するか、迷いましたが、重なるよりは、挿入されて展開したほうが見やすいかと思って、こちらにしました。

これは、好みですね。

あとは、ちょこちょこ微調整して完了といった具合です。