我該怎麼做 - 動畫菜單

這可能違反規則直接問一些事情，但我在我的繫繩的末尾！我該怎麼做 - 動畫菜單

請看這些圖片。

Without Sub- Menu

With Sub-menu

我需要動畫的子菜單下來被點擊時左右。當點擊ABOUT時，我需要使用子菜單向下移動然後移動。

我可以用什麼Jquery？

希望這是有道理的。

謝謝

來源

2011-12-28 Miles

你可以提供你正在使用的菜單項的HTML？ – john 2011-12-28 11:43:53

['animating']（http://api.jquery.com/animate）'width'和'height'屬性怎麼樣？ – 2011-12-28 11:56:33

這裏是一個演示：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，我不能打擾。

來源

2011-12-28 11:56:16

謝謝webarto！這正是我想要的。無論如何，要讓其他子菜單項（團隊）顯示更流暢嗎？該公司似乎工作正常，但團隊似乎只是在屏幕上顯示沒有褪色 – Miles 2011-12-28 12:22:04

是的，當然，我不喜歡.show .hide，你可以使用.fadeIn和.fadeOut，這裏是一個演示http：///jsfiddle.net/Yk8bR/9/ ...你可以使用幾乎任何效果.. http://api.jquery.com/category/effects/ – 2011-12-28 12:25:01

這僅僅是僞代碼，因爲沒有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'}); 
    } 
});

}）;

And a jsfiddle。

來源

2011-12-28 11:50:17 john

我該怎麼做 - 動畫菜單

回答

相關問題