96th Street | Ditto実例　左カラムのメニュー

←左カラムのメニューを表示するDittoコード

階層ごとに2種類の表示を設定する

このサイトは構造としてトップページ・カテゴリ毎のトップになる第２階層・カテゴリ内の各コンテンツページがある第３階層と、３つの階層に分かれている。

その中でDittoによりメニューを表示しているわけだが、

 トップページには各カテゴリのタイトルのみをメニューに表示

第２・第３階層にはカテゴリタイトルに加えて各コンテンツをメニュー表示

という風に表示するよう作っている。 

まずはCSS設定

テンプレートを編集する際、cssでメニュー部分のクラス名をmenuにしておいて、外部スタイルシートに以下の設定を加えてある。

#menu a {
	display:block;
	font-size: 13px;
	text-decoration: none;
	background-image: url(ボタンの背景画像);
	padding-top: 4px;
	padding-bottom: 3px;
	padding-left: 20px;
	font-weight: bold;
	color: #BBBBBB;
	line-height: 13px;
}
#menu a:hover {
	color: #8f6833;
	background-image: url(ボタンの背景rollover画像);
}

まぁね。。。あんまり参考にはしない方が。。。。爆

CSSに関しては完全に独学なんでね、細かく見られるとツッコミドコロ満載と思われますwww

ロールオーバー画像を先読みしとく設定もCSSでしてありますけどね、そのあたりはCSS解説サイトをご覧いただいた方が正確だと思いますょんw

階層毎のスニペットコール

現在、階層が３段階で、各階層毎に細かい部分がいろいろ違うので、テンプレートも３つある。

なので各階層毎にメニュー表示用のスニペットコールを変えて記述してあります。

ちなみに実際にはスニペットコールはチャンクを作成してその中に記述し、テンプレートにはそのチャンク名が記述してあります。

こうすることで、メニュー部分のスニペットコールを変更したい場合、各テンプレートを個別に編集する必要がなくなり、チャンク側でコードを書き換えるだけで済みます。

さて、まずはトップページのスニペットコール

[!Ditto? &startID=`0` &tpl=`menutpl` &sortBy=`menuindex` &sortDir=`ASC` &summarize=`50` &showInMenuOnly=`1`!]

そして第２階層では、上のコールに加えて各コンテンツのメニューを出すためにもうひとつスニペットコールを書き加えています。

[!Ditto? &tpl=`menutpl` &sortBy=`menuindex` &sortDir=`ASC` &summarize=`50` &showInMenuOnly=`1`!]

更に第３階層。ここも表示は一緒なんですが、ちょっと変更してあります。

[!Ditto? &startID=`[*parent*]` &tpl=`menutpl` &sortBy=`menuindex` &sortDir=`ASC` &summarize=`50` &showInMenuOnly=`1`!]

コンテンツメニューに関してはスニペットの説明ページで説明してるんでここでは説明しません。

第２階層はどこが違うかというと、 startIDのパラメータがなくなっています。startIDはデフォルトでカレントドキュメントになっているので、設定しなければ現在見ているカテゴリのコンテンツリストが自動で指定されることになります。

第３階層も、表示は第２階層と同じですが、今度はstartIDを復活させています。指定したいstartIDはカレントドキュメントから見ると親にあたるドキュメントのIDになるため、

&startID=`[*parent*]`

として、親ドキュメントのIDを指定するようにしてあります。 ちなみに　[*parent*]　は親ドキュメントのID番号を返すTVです。

表示用のテンプレートは単純w

表示用のテンプレートが 

&tpl=`menutpl`

で指定してありますが、チャンクmenutplの中身はめちゃくちゃ単純ですw

<a href="[~[+id+]~]">[+pagetitle+]</a>

以上、かなぁり簡単な実例なんで必要ないかと思いましたが、まぁ、Dittoの使い方の一例ということでwww