スニペット - DropMenu（ナビゲーション系・定番）

[Guest]

Welcome, Guest. Please login or register.
Did you miss your activation email?

1 Hour 1 Day 1 Week 1 Month Forever
Login with username, password and session length

[yama]

定番度：★★★★★  扱いの平易度：★★★
規模の小さなサイトならテンプレートにベタ書きのナビゲーションでも困りませんが、
CMSの特性を生かすなら動的生成のナビゲーションが有利です。MODxの基本が
理解できたら、まずは定番スニペット「DropMenu」に挑戦してみてください。

DropMenuはマークアップ派デザイナーに嬉しいシンプルで汎用性の高いリストを出力します。
独自のタグ構造を主張しないため、CSSデザインに習熟したデザイナーであれば誰でも自由に
デザインの美しいナビゲーションを設置できます。(tableタグ出力には対応していません)

http://www.cssplay.co.uk/menus/
↑
ココにあるものはたいてい実装できるでしょう。

●パラメータを与えずに[[DropMenu]]とだけ記述した場合

「メニューに表示」を指定している全ドキュメントのタイトルをメニューとして列挙します。
現在開いているフォルダのみサブメニューを展開したい場合はactiveTreeOnlyパラメータを
利用します。

●パラメータ「levelLimit=1」を指定した場合

[[DropMenu? &levelLimit=`1`]]
一番上のドキュメント階層に属するドキュメントのみを表示します。
つまりフォルダ内に含まれるドキュメントを表示しません。
この方法は横並びのナビゲーションバーにも有効でしょう。

●現在開いているページのメニューをハイライト表示したい

DropMenuのパラメータの操作はしません。表示しているページのソースを見てください。
DropMenuで展開されているメニューのうち、現在開いているページのメニュー(リストタグ)に
class=hereが設定されているのが分かると思います。cssでhereに背景色や文字色、
文字の太さなどを設定するといいでしょう。クラス名「here」はDropMenuのパラメータで
自由に変更できます。

●枠で囲んだメニュー

これもCSSです。class=lastが利用できます。リストタグ基本でtop・right・leftの3方向に
ボーダーを設定し、class=lastのみbottomにもボーダーを追加で設定します。

●縦線で区切った横並びナビゲーション

これもclass=lastを利用します。リストタグ基本でborder-rightを設定し、
class=lastのみborderをnone (表示しない) とします。

●公式なドキュメント
http://modxcms.com/snippet-dropmenu.html (英文)

●DropMenuの最新版？

http://modxcms.com/forums/index.php/topic,5535.0.html
現時点（7月13日）での最新マージはこれかなと思います。が、同梱のものと仕様が微妙に変わってます。
hereのところをstrongタグで囲んでおり、これと差し替えると確実に表示に影響があるので注意。

同梱のものとほぼ互換の最新情報は、以下参照。追加仕様とかはありますが。

http://modxcms.com/forums/index.php/topic,3996.0.html
新パラメータ「activeTreeOnly」を採用した上記バージョンをベースに、
http://modxcms.com/forums/index.php/topic,4095.0.html
さらに新パラメータ「startFromParent」を加え、
http://modxcms.com/forums/index.php/topic,2609.msg17880.html#msg17880
http://modxcms.com/forums/index.php/topic,4752.msg34326.html
上記の２つのバグに対応したものを当アーティクルに添付しておきます。
（topic,4095.0.htmlのコードの貼り付け位置が合ってるかどうか不安ですが）

まだ他にも何かあった気がしますが、思い出したら反映します。

http://modxcms.com/forums/index.php/topic,2859.msg27351.html#msg27351
新パラメータ「activeTreeOnly」というのは、上記のような挙動を
実現するためのものです。全メニューを展開するのではなく、該当カテゴリーを
表示している時だけ、該当カテゴリー内のメニューのみを展開するものです。
一般的な企業サイトなどを作るならこのパラメータは必須でしょう。

個人的にはJoomla!みたいにGUIで自由にメニューを作れる仕組みも欲しいですが、
MODxではその方面のインターフェイス実装の充実はまだこれからのようですね。
(モジュールがそうですよね？)

http://modxcms.com/forums/index.php/topic,2588.0.html
コレのマージの仕方が分からず保留。

●代替スニペット
http://modxcms.com/forums/index.php/topic,4003.0.html
moomenu

http://modxcms.com/forums/index.php/topic,961.html
http://www.htmldog.com/articles/suckerfish/bones/
( 稼働イメージ・実際にListMenuXを使っているわけではない )
ListMenuX

http://www.etomite.org/forums/index.php?showtopic=2070
TransMenu
etomite用スニペット。これがMODxでも使えると面白いけど、メニュー関係は
少し仕様が違うのでそのままは使えないかも。

●その他参考
http://modxcms.com/forums/index.php/topic,4826.0.html
http://modxcms.com/forums/index.php/topic,3031.0.html （アクセスキー対応版）
http://modxcms.com/forums/index.php/topic,4428.0.html （リストごとのID？幅や画像などを個別に対応できるということなら、対応希望！）
http://modxcms.com/forums/index.php/topic,2588.0.html
http://modxcms.com/forums/index.php/topic,4801.0.html

たかがナビゲーションと軽んじるなかれ。DropMenuだけでいろいろな話が出ていて、これをまとめるだけでちょっとしたプロジェクトになりそうです。

http://modxcms.com/forums/index.php/topic,4788.0.html
こんな話も。今までのさまざまな要望を踏まえたうえでまったく違った形で出てくるということなら、期待できそう。

[soushi]

こんにちわ。
ここのDropmenu使わせてもらっています
追加されているactiveTreeOnlyオプション、いい感じです。

ただ、activeTreeOnlyを有効にしてみるとコンテンツを持たないフォルダの下の階層が表示できないので少し改造してみました。
(たとえばMODxをデモ付きでインストールしたときに作られる「MODx Quickstart」フォルダ当が該当します)
emptyExpansionをtrueにするとコンテンツを持たないフォルダは強制的に展開されます。

以下、ここのオリジナルとの差分です。

Code:

$ diff dropmenu.txt dropmenu_org.txt
181,183d180
< // HACK: emptyExpansion
< // $emptyExpansion [ true | false ]
< $emptyExpansion = (!isset($emptyExpansion)) ? false : ($emptyExpansion==true);
210c207
<   function MakeMap($modx, $listParent, $listLevel, $description, $titleOfLinks, $maxLevels, $inside, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $emptyExpansion, $debugMode) {
---
>   function MakeMap($modx, $listParent, $listLevel, $description, $titleOfLinks, $maxLevels, $inside, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $debugMode) {
257c254
<           $itm .= ((!$selfAsLink && ($child['id'] == $modx->documentIdentifier)) || ($itsEmpty && $useCategoryFolders)) ?
---
>           $itm .= ($itsEmpty && $useCategoryFolders) ?
265c262
<           $itm .= (!$selfAsLink && ($child['id'] == $modx->documentIdentifier)) ? $child[$textOfLinks] : '<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$child[$textOfLinks].'</a>';
---
>           $itm .= ($child['alias'] > '0' && !$selfAsLink && ($child['id'] == $modx->documentIdentifier)) ? $child[$textOfLinks] : '<a href="[~'.$child['id'].'~]" title="'.$child[$titleOfLinks].'">'.$child[$textOfLinks].'</a>';
285d281
<           if( $emptyExpansion && $itsEmpty ){ $makeMapYes = TRUE;}
289c285
<             $itm .= MakeMap($modx, $child['id'], $listLevel +1, $description, $titleOfLinks, $maxLevels, true, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $emptyExpansion, $debugMode);
---
>             $itm .= MakeMap($modx, $child['id'], $listLevel +1, $description, $titleOfLinks, $maxLevels, true, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $debugMode);
359c355
<     $modx->setPlaceholder($phName, MakeMap($modx, $siteMapRoot, 0, $showDescription, $titleOfLinks, $maxLevels, false, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $emptyExpansion, $debugMode));
---
>     $modx->setPlaceholder($phName, MakeMap($modx, $siteMapRoot, 0, $showDescription, $titleOfLinks, $maxLevels, false, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $debugMode));
363c359
<     return MakeMap($modx, $siteMapRoot, 0, $showDescription, $titleOfLinks, $maxLevels, false, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $emptyExpansion, $debugMode);
---
>     return MakeMap($modx, $siteMapRoot, 0, $showDescription, $titleOfLinks, $maxLevels, false, $pre, $post, $selfAsLink, $ie, $activeLinkIDs, $topdiv, $topdivClass, $topnavClass, $subdiv, $subdivClass, $subnavClass, $hereClass, $useCategoryFolders, $categoryClass, $showDescription, $descriptionField, $textOfLinks, $orderBy, $orderDesc, $activeTreeOnly, $debugMode);

他に…

・サブフォルダ以下でselfAsLink=falseが有効にならないのを直してみました。
・262行目付近のif文で"$child['alias'] > '0'"がいらないような気がしたのでとってみました(大丈夫でしょうか?)
・まともな英語ができないのでコメントは入れていません…

こちらでいじったDropmenuを添付して良いのかわからなかったので、一応差分のみ乗せてみました。
以上です。
ご参考までに。

[yama]

情報提供助かります。さっそくマージして差し替えておきました。
開発チームにも伝えたいけどこの内容を英語で書くのが少し億劫…汗

[soushi]

さっそくマージしてくれるなんてありがとうございますっ。
また何か思いついたら連絡するかもしれません

それにしても色んなスニペット等、紹介してくださってありがとうございます。
英語が苦手な自分にとってかなり助かっています