「ホーム」「当サイトについて」などのグローバルナビゲーションは、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>