左メニューにプルダウンメニューを適用したい

左メニューにプルダウンメニューを適用したい


全くの初心者なのですが、質問失礼します。



http://www.stone-m.com/
このサイト様の左ショップメニューのように縦に展開していくショップメニューを作りたい
と考えております。
（このサイト様ではクリックで展開しますがマウスオーバーで展開する形で）


いろいろなスクリプトのサンプルを探しましたが横型が多くて、どれもピタリときません。




こちらのアコーディオンメニューでもやってみました。
次のマウスオーバーに行ったときに今まで展開していたものが閉じるので、
閉じないようにしたいです。
（上からなぞって見やすいように）

var j$ = jQuery;

j$(function(){
j$(".acc").each(function(){
j$("li > a", this).each(function(index){
var $this = j$(this);

if(index > 0) $this.next().hide();

$this.mouseover(function()
var params = {height:"toggle", opacity:"toggle"};
j$(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);
return false;
});
});
});
});



scriptのサンプルか、上記を修正して活用する方法があれば教えていただけないでしょうか。

どうぞよろしくお願いします。

No.2 ベストアンサー 回答者： yyr446 回答日時： 2010/04/27 10:07

別のアドバイス

参考サイト「superfish」のライブラリー使えばどうですか
ろじっくはそのまま、見せ方はCSSで調整可能です。

参考URL：http://users.tpg.com.au/j_birch/plugins/superfis …

この回答へのお礼

とても助かりました。
いいヒントをいただきました。
scriptの中身はまだ全く理解できませんが、見せ方はcssなのですね。
勉強不足ゆえに質問の仕方も下手だったと思います。
ご親切に教えていただき本当にありがとうございました。

お礼日時：2010/04/27 11:31

No.1 回答者： yyr446 回答日時： 2010/04/27 10:05

まずは、最初のアドバイス

マウスオーバーで開いたままにしたいからトグル動作はとりあえずおいておいて、
まず摘要させたい<div>を作って、idを付けときます。
<div id="treemenu"></div>とかその中に<ul><li>...</li></ul>でメニューを
階層的に作ります。最初にdivの子要素を全部非表示にしてレベル1の子要素だけ
表示します。li要素がホバーされたら、そいつの一つ下の子要素を
表示して、そいつの兄弟要素の子要素は非表示にするイベントハンドラーを
div内のli要素に紐付けます。（いちいちonmouseover=""を書くのは面倒です）
ざっとこんな感じで、試行錯誤してみて下さい。

この回答へのお礼

なるほど！
とすぐ言えるようなレベルじゃないのでyyr446さんがおっしゃるように
試行錯誤して一から勉強してみます。
ありがとうございます。

お礼日時：2010/04/27 11:25