ITOBEN STYLE > EC-CUBEレスポンシブWebデザイン:グローバルナビゲーション 2013年8月10日カテゴリー:未分類 EC-CUBEレスポンシブWebデザイン:グローバルナビゲーション 「ホーム」「当サイトについて」などのグローバルナビゲーションは、PCでは下図のように表示されます。 タブレットやスマホでは、下図の左上のボタンに収納するような形になります。 ボタンをクリックすると、ナビが展開します。 この動作は、jQuery MeanMenu で実現しています。 ▼jQuery MeanMenu http://www.meanthemes.com/plugins/meanmenu/ ▼jQuery MeanMenuデモ http://www.meanthemes.com/demo/meanmenu/demo.html 本サイト(デモ)の作り方 (1)nav.tplをブロックとして作成し、header.tplで読み込んでいます。 ① header.tplでの読み込み [php] [/php] ② 上記の読み込みを可能にするには、管理画面からのブロック作成では出来ません。 4つのファイルを作成します。 ■html/frontparts/bloc/nav.php ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Nav_Ex.php ■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Nav.php ■data/Smarty/templates/default/frontparts/bloc/nav.tpl ③ ■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Nav.phpのfunction init()内に下記のコードを記述することで、ブロックの読み込みが可能になります。 [php] $this->setTplMainpage(‘nav.tpl’); //include_phpを可能にする。 [/php] ④ nav.tplのブロックは、データベースのdtb_blocに登録していないので、管理画面のブロックには表示されません。 (2)nav.tplの記述 [php] ・・・ ・・・ ・・・ [/php] (3)site_frame.tplの記述 [php] [/php]
「ホーム」「当サイトについて」などのグローバルナビゲーションは、PCでは下図のように表示されます。
タブレットやスマホでは、下図の左上のボタンに収納するような形になります。
ボタンをクリックすると、ナビが展開します。
この動作は、jQuery MeanMenu で実現しています。
▼jQuery MeanMenu
http://www.meanthemes.com/plugins/meanmenu/
▼jQuery MeanMenuデモ
http://www.meanthemes.com/demo/meanmenu/demo.html
本サイト(デモ)の作り方
(1)nav.tplをブロックとして作成し、header.tplで読み込んでいます。
① header.tplでの読み込み
[php]
[/php]
② 上記の読み込みを可能にするには、管理画面からのブロック作成では出来ません。
4つのファイルを作成します。
■html/frontparts/bloc/nav.php
■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Nav_Ex.php
■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Nav.php
■data/Smarty/templates/default/frontparts/bloc/nav.tpl
③ ■data/class/pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Nav.phpのfunction init()内に下記のコードを記述することで、ブロックの読み込みが可能になります。
[php]
$this->setTplMainpage(‘nav.tpl’); //include_phpを可能にする。
[/php]
④ nav.tplのブロックは、データベースのdtb_blocに登録していないので、管理画面のブロックには表示されません。
(2)nav.tplの記述
[php]
[/php]
(3)site_frame.tplの記述
[php]
[/php]