【freo】【freo講座】【初心者の為のfreoサイト運営講座】【メニュー編（03）】サブメニューを作ってみる（後編）

サブメニューを書いてみた。

前回御紹介した項目を並べて書いてみました。
同じ機能でもゲスト用、管理者用などでURLが違うものもあるので、ログイン状況によって表示を変える方法を利用しています。
↓をダブルクリックでコピーできますので、コピペして使ってみてください。

こちらで紹介したサブメニューは32877/freo用サブメニューテンプレート配布からダウンロードできます。

<div id="submenu">
	<h2>サブメニュー</h2>
		<!-- サブメニューここから -->
			<ul>
			<!-- スマホ表示ここから -->
				<li><a href="{$smarty.server.PHP_SELF}?freo%5Bagent%5D%5Btype%5D=iphone">スマホ版</a></li>
			<!-- スマホ表示ここまで -->
			<!-- 連絡ツール系ここから -->
				<li><a href="{$freo.core.https_file}/contact">メール</a></li>
				<li><a href="{$freo.core.https_file}/clap">拍手</a></li>
				<li><a href="{$freo.core.https_file}/message">メッセージ</a></li>
			<!-- 連絡ツール系ここまで -->
			<!-- ユーザー管理系ここから -->
				<!--{if $freo.user.authority == 'root' or $freo.user.authority == 'author'}--><!-- 管理者・投稿者用表示 -->
					<li><a href="{$freo.core.http_file}/login?freo%5Bsession%5D=logout">ログアウト</a></li>
					<li><a href="{$freo.core.https_file}/admin/password_form">パスワード変更</a></li>
					<li><a href="{$freo.core.http_file}/profile/{$freo.user.id}">プロフィール</a></li>
					<li><a href="{$freo.core.http_file}/admin/profile_form">プロフィール編集</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/user">ユーザー管理</a> | </li>
				<!--{elseif $freo.user.authority == 'guest'}--><!-- ゲスト用表示 -->
					<li><a href="{$freo.core.https_file}/user/password_form">パスワード変更</a></li>
					<li><a href="{$freo.core.http_file}/profile/{$freo.user.id}">プロフィール</a></li>
					<li><a href="{$freo.core.http_file}/user/profile_form">プロフィール編集</a> | </li>
					<li><a href="{$freo.core.http_file}/user">ユーザー用ページ</a> | </li>
				<!--{else}--><!-- 非ログインユーザー用表示 -->
					<li><a href="{$freo.core.https_file}/login">ログイン</a></li>
				<!--{/if}-->
			<!-- ユーザー管理系ここまで -->
			<!-- 各種作成・管理系ここから -->
				<!--{if $freo.user.authority == 'root' or $freo.user.authority == 'author'}--><!-- 管理者・投稿者用表示 -->
					<li><a href="{$freo.core.http_file}/admin">管理ページ</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/entry_form">エントリー登録</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/entry">エントリー管理</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/page_form">エントリー登録</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/page">エントリー管理</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/page?pid={$page.id}">このページ以下のページを表示</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/information_form">インフォメーション管理</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/media_form">メディア登録</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/media">メディア管理</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/comment">コメント管理</a> | </li>
					<li><a href="{$freo.core.http_file}/admin/trackback">コメント管理</a> | </li>
					<li><a href="{$freo.core.http_file}/clap/admin">拍手管理</a> | </li>
					<li><a href="{$freo.core.http_file}/message/admin">メッセージ管理</a> | </li>
					<li><a href="{$freo.core.http_file}/bookmark/admin_form">ブックマーク登録</a> | </li>
					<li><a href="{$freo.core.http_file}/bookmark/admin">ブックマーク管理</a> | </li>
				<!-- 各種作成・管理系ここまで -->
				<!-- 32877オリジナルここから -->
					<li><a href="{$freo.core.http_file}/link/admin_form">バナー付きリンク登録</a> | </li>
					<li><a href="{$freo.core.http_file}/link/admin">バナー付きリンク管理</a> | </li>
					<li><a href="{$freo.core.http_file}/news/admin_form">ニュース登録</a> | </li>
					<li><a href="{$freo.core.http_file}/news/admin">ニュース管理</a> | </li>
					<li><a href="{$freo.core.http_file}/event/admin_form">イベント登録</a> | </li>
					<li><a href="{$freo.core.http_file}/event/admin">イベント管理</a> | </li>
				<!-- 32877オリジナルここまで -->
				<!--{/if}--><!-- /管理者・投稿者用表示  -->
			<!-- 各種作成・管理系ここまで -->
			</ul>
		<!-- サブメニューここまで -->
</div>

欲しい機能はのこして、いらない機能は削除して、他に欲しい機能があれば追加して、編集してみてください。
編集が終わったら、submenu.htmlを上書き保存します。

サブメニューをincludeする。

includeについては【基本編（３）】smartyとは/include機能を参照してください。
作ったサブメニュー用のテンプレート「submenu.html」をheader.html上に読み込んでみます。

まずは、サブメニューを設置する場所を決めます。
今回は仮に、メニューの上にサブメニューを設置してみます。

[templates/header.html]をエディタで開いて、<div id="menu">～</div>の直前に、下記のように記述します。

{include file='submenu.html'}

こうすると、header.html内でsubmenu.htmlが読み込まれ、submenu.htmlの内容が表示されます。

サブメニューのスタイルを変更する。

基本スタイルのままだとあまりかっこいいとはいえないので、サブメニューのcssを設定してみます。
[freo/css/default.css]をエディタで開いてください。

メニューのスタイルが書かれている上の部分あたりに、下記のようにスタイルを追加します。

/********* サブメニュー *********************************************/	
	
div#submenu{	
	text-align:right;
}	
div#submenu h2{	
	display:none;
}	
div#submenu ul{	
	margin:0;
	padding:0;
	text-align:right;
}	
div#submenu ul li{	
	display:inline;
	list-style:none;
	margin-left:5px;
}

スタイルシートを上書きしてアップロードすると、スタイルが適用され、リストが横並びになっていると思います。