グローバルナビとサイドバー両方作りたい
デフォルトの上の横長メニューだけではなく左(or右)に縦長メニューを表示させたい。そんな欲張りな方法を紹介します。ほぼリンクの紹介のみになってしまいますがご容赦ください。基本はこちら。
データベースをいじるので敷居が高く感じますがphpMyAdminからなら簡単です。コントローラーのディレクトリが/src/Eccube/ControllerProvider/と/Eccube/Controller/Block/と2つ出てくるので間違わないように気を付けて。
ドロップダウンさせる？させない？
メニューをドロップダウンさせるか、それとも子カテゴリ(サブカテゴリ)さらには孫カテゴリまで展開した状態で表示させるか。
JavaScriptの知識が必要？と思いきやCSSで作られてるんだそうです。
ドロップダウンさせたい場合
こちらの通りに設定したらドロップダウンできました！調べるの大変だったでしょうね。お疲れ様です。
こちらの記事ですがカッコの部分が実態参照の形になっているため、コピペして使わせていただくにはテキストエディタで>を>に置換すること必要になります。
すべて展開させたい場合
逆に最初から全階層展開させたい場合はこちら。
こんなシンプルな方法で実装できるとは。
スマホの時だけ片方は非表示に
以上のカスタマイズをすると、スマホで表示したときにメニューがダブってしまいます。なのでどちらか片方のリストタグにクラスを指定する必要が出てきます。
一番最初の記事でいうと「カテゴリ」と「メインメニュー」どちらかのブロックを編集してpcというクラスをつけてあげれば片方が消えます。
ちなみにspというクラスをつければスマホのみ表示となります。便利ですね。以下の記事が分かりやすいです。
こうしてPCとスマホ両方にメニューを作ることに成功しました。ブログオーナーのみなさんに感謝です。
コメント