2011-12-28 3 views
1

これはおそらく何かを真っ直ぐに尋ねるルールに反していますが、私はテザーの最後です!どうすればいいですか - アニメメニュー

これらの画像をご覧ください。

Without Sub- Menu

With Sub-menu

私は約がクリックされたときにサブメニューが下りてくるアニメーション化する必要があります。 ABOUTをクリックすると、アニメートするサブメニューが必要になります。

Jqueryはこれにどのように使用できますか?

これはうまくいけばうまくいきます。

はありがとうございました

+0

メニュー項目に使用しているHTMLを提供できますか? – john

+0

['animating'](http://api.jquery.com/animate)の' width'と 'height'プロパティはどうですか? –

答えて

1

はデモです:http://jsfiddle.net/Yk8bR/1/

私が代わりにクリックの、ホバーを使用していますが、それを変更することができます。

$('#menu ul li').hover(function(){ 
    $(this).find('ul').show(400); 
}, 
function(){ 
    $(this).find('ul').hide(0); 
}); 

HTML(アンカーに忘れないでください)

<ul id="menu"> 
    <li>Home</li> 
    <li>About 
     <ul> 
      <li>The Company</li> 
      <li>The Team</li> 
     </ul> 
    </li> 
    <li>Services</li> 
</ul> 

あなたはデモで、基本的なCSSを参照してくださいよ、私はそれを気にすることはできません。

+0

ありがとうwebarto!それはまさに私が欲しいものです。しかし、他のサブメニュー項目(チーム)をスムーズに見せてくれるのはとにかくありますか?会社はうまくいっているようだが、チームは退屈なことなく画面に表示されるようだ。 – Miles

+0

ええ、確かに、私は好きではない。どちらかというと、.fadeInと.fadeOutを使うことができる。ここではデモhttp:/ /jsfiddle.net/Yk8bR/9/ ...あなたはどんな効果もあります。http://api.jquery.com/category/effects/ –

1

で動作するようにHTMLコードはありませんので、これは単なる疑似コードです:

$(document).ready(function() { 
    $('.menu-container-selector').children('ul').children('li').click(function() { 
     if ($(this).find('ul.sub-menu-ul').length > 0) { 
     $(this).find('ul.sub-menu-ul').animate({'opacity':'1','top':'30px','left':'100px'}); 
    } 
}); 

});

およびjsfiddle。ここで

関連する問題