NC3への記録

dropdownメニューに苦戦・断念・・・

やはりひとつのソースでPC・スマホの表示・制御が難しいので、2つのブロックでPC用、スマホ用のソースを記載して画面の大きさによって切り替える方法となってしまいました。

Foundationの場合はできたのですが・・・

取り敢えず、操作性を考え断念してしまいました。

もう少しスマホ用の色目を整え完成としま~す。

 

やはりスマホのリスト形式の3層目ページにはまってしまい今まで触ってしまいました。

3層目の確認用として「お問合せ」ページの下に3層目として「お問合せの下の下1・2」を作成しています。

3層目も表示できています。一度ご覧ください。・・・・やったあ~!

(何層でも行けると思うのですが、4層目までは確認しました)

 

今回はプラグインのカスタマイズで、

/app/Plugin/Menus/Controller の MenusController.php を少し変更

「dropdown」を表示タイプに指定した場合、すべてのページを表示対象とするためすべてのページ情報を取得するように変更

/app/Plugin/Menus/View/Elements/Menusの「header」を複写し「dropdown」として配置

 index.ctp、list.ctp、list_start.ctp、list_end.ctpをdropdownのbootstrapのタグを吐き出すように変更

/app/Plugin/Menus/webroot/cssにdropdownのフォルダを作成しstyle.cssを作成

デザインなどオーバーライドする部分のみ記述

/app/Plugin/Menus/webroot/jsにdropdownのフォルダを作成しmenus.jsを作成

一階層目のクリックが発火しなかったのでclickイベントリスナーを設定

 

次は、ページトップへの移動ボタン設置でも挑戦してみようかな?

今日は一日中、PCの前で・・・、よく頑張りました。