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での読み込み

<!--{include_php file="`$smarty.const.HTML_REALDIR`frontparts/bloc/nav.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()内に下記のコードを記述することで、ブロックの読み込みが可能になります。

$this->setTplMainpage('nav.tpl'); //include_phpを可能にする。

 nav.tplのブロックは、データベースのdtb_blocに登録していないので、管理画面のブロックには表示されません。

(2)nav.tplの記述

<nav>
<ul id="menu" class="cf">
<li>・・・</li>
<li>・・・</li>
<li>・・・</li>
</ul>
</nav>

(3)site_frame.tplの記述

<!--▼ナビメニュー jquery.meanmenu-->
<link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.meanmenu/meanmenu.css" />
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.meanmenu/jquery.meanmenu.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('header nav').meanmenu();
});
</script>