Superfishの最終項処理について

質問

Superfishでナビゲーションを作っておりまして、親項目を横並びにしています。
子が下に伸び、孫がその横に展開して下に伸びる一般的な使い方をしているのですが、最後の項目の、孫項目は、子項目の左側に展開して欲しいのです。
(子の矢印も左側に置きたい。)

WEBサイトの全幅が例えば960pxだとすると最後の項目の孫は960px+ボタン幅になるので、1024pxくらいのディスプレイだと孫項目がはみ出してしまうことになるからです。

できれば、HTML側には特別な要素を加えずに出来る方法があればありがたいのですが、良い方法があれば教えていただけませんでしょうか。

回答No.1

yyr446 · ベストアンサー

>>HTML側には特別な要素を加えずに出来る方法

※詳しく中身を検証する気はないですが、
矢印画像も含め、方向をごそっと入れ替えたsuperfish.cssを、もう一組作り、
そのCSS中のクラス名sf-menuとかをsf-menu-Rとかに全部書き換えておいて、sf-menu-R
を使うsuperfish.jsをコピーして、もう一組superfishR作って、中身を全部書き換えて、

$("ul.sf-menu").superfish();
$("ul.sf-menu-R").superfishR();

とか、あっHTMLもやっぱしそのままじゃなくて、ちょっとなおさなきゃ！
無理やり禁断のテーブルレイアウト（酷い）
<table><tbody><tr>
<td>
<ul class"sf-menu">
<li>
....
<li>
</ul>
</td><td>
<ul class"sf-menu-R">
<li>
<li>
</ul></td>
</tr></tbody></table>

お礼

回答いただきましてありがとうございます。
そうですよね...やはり最低でも一か所はHTML側に手を入れないと難しいですよね。
CMSで自動生成されるリストタグに適用したいので、ULやLIに余計な属性を加えず大外にクラス名を付けたDIVでくくり、CSSも全て一個上のDIVから適用されるように変更したのですが、最悪はこの部分手動更新にして

<div class="sf-menu">
<ul>
　<li>XXXXX
　　<ul>
　　　<li>XXXXX</li>
　　　<li>XXXXX</li>
　　</ul>
　</li>
　<li>XXXXX</li>
　<li>XXXXX</li>
　<li>XXXXX</li>
　<li>XXXXX ←ここ最後の親
　　<ul>
　　　<li>XXXXX</li>
　　　<li>XXXXX</li>
　　</ul>
　</li>
<ul>
</div>

これをyyr446さんに教えていただいた方法で下のように

<div class="sf-menu">
<ul>
　<li>XXXXX
　　<ul>
　　　<li>XXXXX</li>
　　　<li>XXXXX</li>
　　</ul>
　</li>
　<li>XXXXX</li>
　<li>XXXXX</li>
　<li>XXXXX</li>
　<li class="sf-menu-R">XXXXX ←ここ最後の親にclass付ける
　　<ul>
　　　<li>XXXXX</li>
　　　<li>XXXXX</li>
　　</ul>
　</li>
<ul>
</div>

あとはCSSでsf-menu-R部分以降を、逆にした数値のスタイルで上書きしてみようかと思います。
しかし、superfish.jsをコピーしてもう一組作るという手段は、なんか発展性があるような気がしてきました。
もう少しゴニョゴニョしてみます。
Javascript出来ればいいんですがちんぷんかんぷんで...