一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

jQueryでドロップダウンメニューをつくってみた

今日は以前勉強した復習として、jQueryでドロップダウンメニューをつくってみました。

完成品→http://jsfiddle.net/danimal141/xuFxg/embedded/result/

しょぼくてすんません。。 

 

それでは順を追って、簡単に書いていきたいと思います!!

1,HTML

まずは<ul>,<li>で簡単にHTMLを作成。

まずメインメニューが3つ並んでて、各メニューがサブメニューを3つずつ持っているという構成にします。

<ul class="menu">の3つの<li>の中にそれぞれ<ul class="sub_menu">があるような感じです。

 

 2,CSS

次に全体の装飾や位置を調整。このへんはテキトーで。

 

3,jQuery

はじめはサブメニューが非表示の状態でスタート( ´∀`)まずは華麗に子要素のメニューを非表示にするぜ!!

$(".sub_menu).hide(); 

とやったのですが、これだとはじめにページをロードした時に一瞬、子要素のサブメニューがチラついてしまう恐れがある?と思ったので、無難にCSSで、

.sub_menu{display:none};

としました。

次にメインメニューにマウスオーバーしたときに子要素のサブメニューが表示されるという作りを実装します。またマウスアウトしたら、開いていたサブメニューはまた非表示に戻るようにします。

$(".menu li").hover(function(){
  	$("ul:not(:animated)", this).slideDown("fast");
		},function(){
			$("ul",this).slideUp("fast");
       });    

 

hoverは、一個目のfunction でマウスオーバー時の動きを、二個目のfunctionでマウスアウト時の動きを指定します。

あとセレクタに、(:animated)をつけてアニメーション中のulにはイベントが重複しないよう注意します。

 

あ、、これで完成。一瞬で終わってしもた。。

前に本で勉強した時はさらに子要素の中に子要素があったりもしたんですけど、まあ今日のところはこれぐらいにしておきましょう。。

 

ちなみにその本はこれ。めっちゃ良書でした!!おすすめ!!

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

 

小さなことからコツコツと。