javacriptで縦もしくは横へスライドするアコーディオンメニューの
サンプルスクリプトはよくあるのですが、ボタンをクリックまたはロールオーバーすると
そのボタンから同時に縦と横へメニューが伸びていくようなメニューを作成したいと思っています。
(ボタンを基点にL字型にのびていくようなかんじです)
http://net.tutsplus.com/tutorials/javascript-aja …
で紹介されているjQueryのスクリプトは近いのですが、これはクリックすると
一つ一つliタグでコーディングされた部分がスライド的に現れるものですが
このスクリプトの場合開くにあたる動作しかできません。
ロールオーバーで展開し、マウスアウトで閉じたいと思っています。
できれば開くときの逆方向のアニメーションでできればベストなのですが
こういった動きをどうすればよいのか、
こういった動きが再現できるプラグインやスクリプトの書き方など、
ご存知のかたがいらっしゃいましたらご教授お願いします。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
どのような動きを想定していらっしゃるのかよくわからないのと、参考サイトは良く見ていませんけれど、その内容でほぼよろしいのなら…
>これはクリックすると
>一つ一つliタグでコーディングされた部分がスライド的に現れるものですが
>このスクリプトの場合開くにあたる動作しかできません。
例えば、
クリックイベントで設定している部分を、click → hoverあるいはmouseoverなどで動作させ、閉じる時はfadeIn → fadeOutなどのようにほぼ反対の動作がjQueryに用意されていますので、同じ要領で逆の処理をさせるようにすればよろしいのではないでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- docomo(ドコモ) 通話録音が(最初から)自動的に始まるアプリは? 7 2023/01/16 15:53
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- JavaScript イラストレーター、縦中横のショートカットをスクリプトを使って作成する方法 1 2023/04/19 11:15
- その他(プログラミング・Web制作) GASでガントチャートを作りたいです 1 2022/09/05 17:26
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- PowerPoint(パワーポイント) you tubeにパワポで作った動画を投稿する方法 1 2023/04/09 22:56
- その他(コンピューター・テクノロジー) PC利用中に勝手に起動する窓を消し去る方法を教えて下さい。 1 2023/05/08 16:48
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- Facebook Facebookの投稿欄が変に? 投稿できない! 1 2023/04/12 14:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プログラムについて。
-
スマホ上で、左右スワイプで次...
-
初心者です。gulpでコンパイル...
-
プログラムがうまく動きません...
-
jsで質問です。 displayプロパ...
-
【Google Apps Script】「ライ...
-
console.logがどうしても2つ機...
-
指定時間になったら、WEBサイト...
-
Googleフォームで選択肢に応じ...
-
セレクトを全て選択されていな...
-
イラストレーター、縦中横のシ...
-
sessionStorageを調べています。
-
コードレビューをお願いします。
-
セレクトボックスで配列を呼び...
-
jsで、配列内の文章を改行する...
-
jQueryで同じクラス名のものを...
-
HTMLタグに複数のクラスを設定...
-
コードレビューをお願いします。
-
IndexedDB を使ってファイルア...
-
画面遷移を行わずに同一ページ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
amazonの商品画像拡大のようなj...
-
jwplayer.js controlbar制御
-
「光の三原色」みたいな「三つ...
-
ホームページビルダーを使って...
-
d3.jsを使っての折れ線グラフと...
-
最後から最初に戻って始まるカ...
-
ページ全体の拡大/縮小が行え...
-
リンク先をマウスが移動すると...
-
アンカーにマウスオーバーして...
-
C#で枠無しウィンドウの移動
-
Windows Form のMSChartで、グ...
-
altやtitleタグの表示のような...
-
【JavaScrip】メニューボタンに...
-
画像のポップアップ
-
画像の上にマウスをもってくる...
-
教えてgooのカテゴリー選択のよ...
-
JavaScriptで・・・
-
JavaScriptで、表を絞り込み&ソ...
-
ポップアップでX固定Yマウス座...
-
以下のコードを実行しても、オ...
おすすめ情報