WEB-PARK.ORG

jQueryで作るanimateを使ったドロップダウンメニュー

Javascript

2010.01.05

グローバルメニューでよく使われるドロップダウンメニューですが、
jQueryのanimateを使って動きに装飾を加えます。

HTMLソース

view sourceprint?
01.<ul id="mainNav">
02.    <li><a href="">Adobe</a>
03.        <ul class="subNav">
04.            <li><a href="#">Photoshop</a></li>
05.            <li><a href="#">Illustrator</a>
06.                <ul class="subNav">
07.                    <li><a href="#">Pentool</a></li>
08.                    <li><a href="#">Peje</a></li>
09.                </ul>
10.            </li>
11.        </ul>
12.    </li>
13.    <li><a href="">Macromedia</a>
14.        <ul class="subNav">
15.            <li><a href="#">Dreamweaber</a></li>
16.            <li><a href="#">Flash</a>
17.                <ul class="subNav">
18.                    <li><a href="#">Actionscript</a></li>
19.                    <li><a href="#">Timeline</a></li>
20.                </ul>
21.            </li>
22.        </ul>
23.    </li>
24.</ul>

複雑なulの入れ子構造でも問題なく動きます！

cssソース

view sourceprint?
01.ul#mainNav li {
02.    position: relative;
03.    float: left;
04.    margin-right: 1px;
05.    padding-top: .6em;
06.    width: 10em;
07.    height: 2em;
08.    background: #333;
09.    border-bottom: solid #000 1px;
10.    text-align: center;
11.    *display: inline;
12.    *zoom: 1;
13.}
14. 
15.ul#mainNav li a {
16.    display: block;
17.    width: 100%;
18.    height: 100%;
19.    color: #fff;
20.    font-weight: bold;
21.    text-decoration: none;
22.}
23. 
24.ul#mainNav li a:hover {
25.    text-decoration: underline;
26.}
27. 
28.ul.subNav{
29.    padding-top: 1px;
30.    *position: relative;
31.    *zoom: 1;
32.}
33. 
34.ul.subNav li ul.subNav {
35.    position: absolute;
36.    top: 0;
37.    left: 10em;
38.}

Javascriptソース

view sourceprint?
01.$(function(){
02.    $("ul#mainNav li").hover(function(){
03.        $("> ul:not(:animated)" , this).animate({
04.            height : "toggle",
05.            opacity : "toggle"
06.        }, 500 );
07.    },
08.    function(){
09.        $("> ul" , this).fadeOut("slow");
10.    });
11.});

ソースはかなりシンプル。
でも、問題なく動きます！

Javascriptソースの解説

2行目：.hide()
まず「subNav」クラスのul要素を非表示指定します。
4行目から7行目
ここでは3行目で記述した、liにhoverした時の動作にanimateを指定しています。
$(“> ul:not(:animated)” , this).animate({ でhoverしたli要素の子要素ulの動作の指定を開始します。
:not(:animated)で動作が連続しないようにしています。
height : “toggle”, と opacity : “toggle” で徐々に表示されるアニメーションが展開されます。
}, 500 ); の数値はアニメーションのスピードを表しています。

サンプル

シンプルなJavascriptですが、良く動きます！
簡単なのでanimateの勉強にはいいです。
サンプルはこちら

更新履歴

2010.06.11
IE6、7での不具合がありましたので、JavascriptとCSSを変更しました。
変更箇所は「ul#mainNav li」と「ul.subNav」です。
Javascriptは下記コードを削除しました。非表示設定は後述のCSSでしております。

view sourceprint?
1.$("ul.subNav").hide()

IE6、7用のスターハックと「ul.subNav」にdisplay: none;を追加しています。

view sourceprint?
01.ul#mainNav li {
02.    *display: inline;
03.    *zoom: 1;
04.}
05. 
06.ul.subNav{
07.    display: none;
08.    *position: relative;
09.    *zoom: 1;
10.}
  1. Web-Parkのホーム > 
  2. Javascript > 
  3. jQueryで作るanimateを使ったドロップダウンメニュー
オススメ本（既読）
読んでみたい本（未読）

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT!!

管理人さま

お世話になります。こちらのドロップダウンメニュー、動きがなめらかで、とても気に入り早速設定してみました。単体ではどうにか、完成したのですが、IEの場合、サブメニューの表示と同時に、その下の要素を押し下げてしまいます。何か回避さくはあるでしょうか？　お手数をとらせて申し訳ないですが、もし回避策があり、お時間が許すようでしたら、教えていただけると有り難いです。
なお、chromeやfirefoxでは正常に動作します。

よろしくお願いします。

コメントありがとうございます。
また、お騒がせしてすいません。IE6、7で不具合が出ておりました。
変更箇所はサイトの「更新履歴」に追記しました。
お試しお願いします。

管理人さま

不具合の修正、ありがとうございました。正常に動作するようになりました。あまりに早い対応に驚きつつ、感謝の気持ちでいっぱいです。また、ご相談させていただくかもしれません。よろしくお願いします。

忘備録：jQueryを使ったプルダウンメニュー。

プルダウンメニューのつくりかたは、WEB上にたくさん紹介されている。最近は、jQueryのものが多い。ただし、あまりに数が多すぎて、どれがいいのかわからない。今回、ボタンを画像でつ…

COMMENT PLEASE!!

トラックバック

「jQueryで作るanimateを使ったドロップダウンメニュー」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
http://web-park.org/javascript/dropdown091229.html/trackback
about me