左メニューにプルダウンメニューを適用したい
全くの初心者なのですが、質問失礼します。
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ベストアンサー
- 回答日時:
別のアドバイス
参考サイト「superfish」のライブラリー使えばどうですか
ろじっくはそのまま、見せ方はCSSで調整可能です。
参考URL:http://users.tpg.com.au/j_birch/plugins/superfis …
とても助かりました。
いいヒントをいただきました。
scriptの中身はまだ全く理解できませんが、見せ方はcssなのですね。
勉強不足ゆえに質問の仕方も下手だったと思います。
ご親切に教えていただき本当にありがとうございました。
No.1
- 回答日時:
まずは、最初のアドバイス
マウスオーバーで開いたままにしたいからトグル動作はとりあえずおいておいて、
まず摘要させたい<div>を作って、idを付けときます。
<div id="treemenu"></div>とかその中に<ul><li>...</li></ul>でメニューを
階層的に作ります。最初にdivの子要素を全部非表示にしてレベル1の子要素だけ
表示します。li要素がホバーされたら、そいつの一つ下の子要素を
表示して、そいつの兄弟要素の子要素は非表示にするイベントハンドラーを
div内のli要素に紐付けます。(いちいちonmouseover=""を書くのは面倒です)
ざっとこんな感じで、試行錯誤してみて下さい。
なるほど!
とすぐ言えるようなレベルじゃないのでyyr446さんがおっしゃるように
試行錯誤して一から勉強してみます。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptでEnterキーをtabキ...
-
jQuery多層式アコーディオンメ...
-
「jQuery」アコーディオンメニ...
-
jQueryでネスト構造の<li>がク...
-
jQueryでタブ切り替え
-
クリックするとサブメニュー
-
Jqueryでリストのスクロール
-
MAX関数を使ってからLEFT JOIN...
-
textareaに画像を表示したい
-
MFCで画像を表示させているので...
-
javascriptテキストBOX色を元に...
-
外部ファイルにしたら文字化け...
-
jQueryでシンプルドラッグドロ...
-
複数bxsliderをタブで切り替え...
-
変数内容をHTML内で表示する方法
-
テキストエリア内の一部の文字...
-
表示・非表示のスクリプトで、...
-
タブで開いてさらにタブ内をア...
-
「画像クリックで音声再生」を ...
-
離れた場所にマウスオーバーで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
クリックした<a>タグのみにClas...
-
どの<li><a> が押されたか判別...
-
【javascript で動的に a タグ...
-
文字と数字が混在する要素のsor...
-
javascriptでEnterキーをtabキ...
-
複数のラジオボタン項目でのテ...
-
チェックボックスに入っている...
-
jquery ドロップダウンメニュー...
-
jQueryのeqで最後からn番目以降...
-
JavaScriptで、?マークとコロ...
-
質問に答えていくと、回答によ...
-
Jqueryでリストのスクロール
-
多階層ドロップダウンのスマホ...
-
JQueryタブのアクティブ アン...
-
複数の画像をランダム(シャッ...
-
タブ切り替えの初期表示について
-
「jQuery」アコーディオンメニ...
-
オンマウスで画像ロールオーバ...
-
gridstack.jsについて教えてく...
おすすめ情報