サイト制作に使用した自作jQueryコードのご紹介WEB-PARK.ORGContactRssTwitterjQueryで作るanimateを使ったドロップダウンメニューJavascriptanimate/dropdown/jQuery/toggle/2010.01.05ツイートグローバルメニューでよく使われるドロップダウンメニューですが、jQueryのanimateを使って動きに装飾を加えます。this).fadeOut("slow");});});ソースはかなりシンプル。問題なく動きます!Javascriptソースの解説2行目:.hide()まず「subNav」クラスのul要素を非表示指定します。4行目から7行目ここでは3行目で記述した、liにhoverした時の動作にanimateを指定しています。hoverしたli要素の子要素ulの動作の指定を開始します。:not(:animated)で動作が連続しないようにしています。徐々に表示されるアニメーションが展開されます。数値はアニメーションのスピードを表しています。サンプルシンプルなJavascriptですが、良く動きます!簡単なのでanimateの勉強にはいいです。サンプルはこちら更新履歴2010.06.11IE6、7での不具合がありましたので、JavascriptとCSSを変更しました。li」と「ul.subNav」です。Javascriptは下記コードを削除しました。非表示設定は後述のCSSでしております。none;を追加しています。PM管理人さまお世話になります。こちらのドロップダウンメニュー、動きがなめらかで、とても気に入り早速設定してみました。単体ではどうにか、完成したのですが、IEの場合、サブメニューの表示と同時に、その下の要素を押し下げてしまいます。お手数をとらせて申し訳ないですが、もし回避策があり、お時間が許すようでしたら、教えていただけると有り難いです。chromeやfirefoxでは正常に動作します。AMコメントありがとうございます。お騒がせしてすいません。IE6、7で不具合が出ておりました。変更箇所はサイトの「更新履歴」に追記しました。AM管理人さま不具合の修正、ありがとうございました。正常に動作するようになりました。あまりに早い対応に驚きつつ、感謝の気持ちでいっぱいです。ご相談させていただくかもしれません。PM忘備録:jQueryを使ったプルダウンメニュー。プルダウンメニューのつくりかたは、WEB上にたくさん紹介されている。最近は、jQueryのものが多い。あまりに数が多すぎて、どれがいいのかわからない。(必須)ウェブサイトトラックバック「jQueryで作るanimateを使ったドロップダウンメニュー」のトラックバックURLhttp://web-park.org/javascript/dropdown091229.html/trackbackCATEGORYFlashJavascriptPhotoshopwebsiteWordPressRECENTRYjQueryでモーダルウィンドウのプラグインを自作したので公開します。year1982FromOsaka,Japan。