Web Material Memo Pad

Article

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FC2ブログで動的ドロップダウンメニュー

FC2ブログで動的ドロップダウンメニュー

以前書いた記事 ドロップダウンメニュー CSS3で実装のスタイルと FC2ブログナビゲーションバーが自動で増えるで使ったFC2の変数を使って FC2ブログに動的な(自動増減)ドロップダウンメニューを実装 ※ドロップダウンさせるには「親子カテゴリ設定」が必要 詳しくはFC2ヘルプ

こちらを導入したFC2テンプレートを共有してます。 面倒な方はご利用ください。 共有テンプレート FC2管理画面にログインしてください。

[テンプレートの設定]→[編集]で入れたい部分に↓コピペ
<ul id="menu">
	<li><a href="/">Home</a></li>
	<!--category-->
	<!--category_nosub--><li><!--/category_nosub-->
	<!--category_parent--><li><!--/category_parent-->
	<!--category_sub_begin--><ul><!--/category_sub_begin-->
	<!--category_sub_hasnext--><li><!--/category_sub_hasnext-->
	<!--category_sub_end--><li><!--/category_sub_end-->
	<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
	<!--category_sub_hasnext--></li><!--/category_sub_hasnext-->
	<!--category_sub_end--></li></ul></li><!--/category_sub_end-->
	<!--category_nosub--></li><!--/category_nosub-->
	<!--/category-->
</ul>
</ul>
スタイルはこの記事↓のをコピペ
ドロップダウンメニュー CSS3で実装

解説的なもの

<ul id="menu">
<li><a href="/">Home</a></li>
<!--category-->
<!--category_nosub--><li><!--/category_nosub-->
<!--category_parent--><li><!--/category_parent-->
<!--category_sub_begin--><ul><!--/category_sub_begin-->
<!--category_sub_hasnext--><li><!--/category_sub_hasnext-->
<!--category_sub_end--><li><!--/category_sub_end-->
<a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
<!--category_sub_hasnext--></li><!--/category_sub_hasnext-->
<!--category_sub_end--></li></ul></li><!--/category_sub_end-->
<!--category_nosub--></li><!--/category_nosub-->
<!--/category-->
</ul>
ドロップダウンした時のレイアウトの関係上、
左端のリンクは静的に書いておく
<li><a href="/">Home</a></li>
<!--category-->で囲まれたもの↓はカテゴリの数だけ繰り返(以下回す)される。
<a href="<%category_link>" title="<%category_name>"><%category_name>(<category_count>)</a>
その他の変数は
回す部分の前に書けば前に表示され
後ろに書けば後ろに(ry
工夫すればリスト(<li>)ごと回せるかもしれない。。。

大変なので
回す部分を挟んで、各項目を上下に二箇所に書いてある。

タグを閉じたくないところは後ろに書いてない場合もある。
(category_parent&category_sub_begin
細かく言うと
子カテゴリがある場合、通常の閉じタグ プラス
子のulを親li内に内包したいので
下のcategory_sub_end(最後の子カテゴリ)のタグで
↑上のふたつに書いてあるタグを閉じている。
<!--category_parent-->
<li>本文的なものが入る
<!--/category_parent-->
</li>下にも書くとここで閉じしまう
	<!--category_sub_begin-->
	<ul><!--/category_sub_begin-->
		<!--category_sub_hasnext-->
		<li>子
		<!--/category_sub_hasnext-->
		本文的なものが入る
<!--category_sub_end-->
		</li>子
	</ul>子(category_sub_beginの閉じタグ)
</li>親(category_parentの閉じタグ)
<!--/category_sub_end-->
回す部分との上下の位置関係以外はどこにかいても良い(筈)
使ってる変数
category_nosub 親カテゴリを子カテゴリが無い場合に表示
category_parent 親カテゴリを子カテゴリがある場合に表示
category_sub_begin 先頭の子カテゴリに表示
category_sub_hasnext 最後以外の子カテゴリに表示(先頭含む)
category_sub_end 最後の子カテゴリに表示

以上、
コピペだけで実装できて楽なので
FC2ブログユーザーの方はお試しあれ
スポンサーサイト

Comment

Commentform

user information
(編集・削除用):
管理者にだけに表示
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。