スマフォ版メニュー
スマフォ版でメニューをPC版と同じように出すと、ちょっと見づらい。
そこで、よくあるハンバーガーメニューに変えてみました。
よくあるタイプなので、Google先生に聞くといろいろ教えて頂けます。
その中でも一番単純なタイプでやってみようと、先ずページを表示された時には隠れていて、トリガーになる所をクリックしたら展開するというやつです。
メニューはheader.phpに書いてあるので、まずSP版のソースを追記して、クラスでPC／SPと別けます。
次にCSSで両方のクラスを追記して、@mediaで出し分けします。
今回はページ上部に重なってメニューが出るようにするか、展開された領域を挿入して表示するか、迷いましたが、重なるよりは、挿入されて展開したほうが見やすいかと思って、こちらにしました。
これは、好みですね。
あとは、ちょこちょこ微調整して完了といった具合です。
