jQuery Droppyを使ったプルダウンメニュー

2011年7月29日 at 15:02

山野井研究室さんのDroppyメニューを使っているのですが、
cssのクラス「nav-selected」を下の階層だけでなく
その親階層すべてに反映させるには、
どこを修正すれば良いのでしょうか?

例)
ホーム
会社案内
  商品
    おもちゃ
    食品
  スタッフ
お問い合わせ

上記のように、おもちゃのページを表示したときに、
メインメニューの「おもちゃ」だけにclass="nav-selected"となるのではなく、
その上の階層全部(商品、会社案内)にも同様に
class="nav-selected"を反映させたいのです。
ホーム
会社案内
  商品
    おもちゃ
    食品
  スタッフ
お問い合わせ

説明が下手ですいませんが、宜しくお願いします。

Re: jQuery Droppyを使ったプルダウンメニュー

2011年7月30日 at 10:55
yamanoiです。

nav-selectedではなく、class="nav-path-selected"の記述してみてください。
これで解決します。
 

Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年7月30日 at 18:08
返信ありがとうございます!
確かに、class="nav-path-selected"だと、
上の階層まで同じクラスが反映されているのでOKです。

でも、どのページでも「ホーム」が常に
class="nav-path-selected"になっているのが問題です。
 

Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年7月31日 at 19:01
yamanoiです。

CSSは下のようにアンカー(a)を指定していますか?
ul.nav a.nav-path-selected {
}
アンカー(a)を指定しないとliにもCSSが効いてしまいます。
 

Re: Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年8月1日 at 6:45
例えば、以下のような構造で、
テスト1-2-3というページに居る場合。

ホーム
テスト1
  テスト1-2
    テスト1-2-3
お問い合わせ

HTMLは以下のようになり、
ホームにテスト1と同様に、
liとaにclass="nav-path-selected"が反映されてしまいます。

<div id="drop4" class="droppy">
<ul class="nav">
<li class="nav-path-selected"><a class="nav-path-selected" href="./" >ホーム</a></li>
<li class="nav-path-selected"><a class="nav-path-selected" href="test1/" >テスト1</a>
<ul>
<li class="nav-path-selected"><a class="nav-path-selected" href="./test1/2/" >テスト1-2</a>
<ul>
<li class="nav-path-selected"><a class="nav-selected nav-path-selected" href="./test1/2/3/" >テスト1-2-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contact/" >お問い合わせ</a></li>
</ul>
</div>
 

Re: Re: Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年8月1日 at 11:02
yamanoiです。

ナビにホームは必要ですか。
無くてもよければ、「ホーム」を編集にして、メニューにある「権限」でオートナビから除くを設定すればホームは表示されなくなります。

ホームも出したい場合は、カスタムテンプレートしかないと思います。

追加
「権限」-->「設定」でした。
 

Re: Re: Re: Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年8月1日 at 12:31
オートナビでホームを非表示にする方法もありですが、
やっぱり、ホームはあった方が良いです。

私はデザイナーなのでPHPに関して、あまり詳しくありません。
テンプレートをどのように修正すれば良いのでしょうか??
宜しくお願いします。
 

Re: Re: Re: Re: Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年8月2日 at 12:21
yamanoiです。

/concrete/blocks/autonav/view.php を/blocks/autonav/templates/droppy/sub.phpにコピーします。
このsub.phpの64行目あたりを下に修正します。

if ($c->getCollectionID() == $_c->getCollectionID()) {
echo('<li class="nav-selected nav-path-selected"><a class=
"nav-selected nav-path-selected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs)
&& $_c->getCollectionID() > 1 ) {
echo('<li class="nav-path-selected"><a class="nav-path-sel
ected" href="' . $pageLink . '">' . $ni->getName() . '</a>');
} else {
echo('<li><a href="' . $pageLink . '">' . $ni->getName() .
'</a>');
}


あと、view.phpの中を下のよう修正します。
echo '<div id="drop'.$controller->bID.'" class="droppy">';
require('sub.php');
echo '</div>';


これで解決できると思います。
 

Re: Re: Re: Re: Re: Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年8月2日 at 13:53
完璧です!
ありがとうございました。grin
 

Re: Re: Re: Re: Re: Re: Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年8月3日 at 0:16
プルダウンメニューを設置されているホームページを教えていただけますか。
 

Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: jQuery Droppyを使ったプルダウンメニュー

2011年8月3日 at 7:06
私の会社のホームページですがyamanoiさんの作成された、プルダウンメニューを使用させていただいています。

http://www.higuchisyoten.co.jp/webpage/

参考になれば幸いです。