實現jQuery滾動效果的最佳方式

Question

我在執行以下jQuery效果時遇到了問題，導致導航問題。

會有在屏幕的頂部下面的圖片：

menu link http://img820.imageshack.us/img820/2707/linkz.jpg

當用戶點擊這個，下面的菜單應該滾出：

nav http://img805.imageshack.us/img805/2383/menue.jpg

我HTML如下：

<div class="left_corner"><img src="images/homepage_menu_lft.gif" alt="corner" /></div> 
<div class="header_buttons typeface-js" style="font-family: Palatino LT Std"> 

    <ul> 

       <li> <a href="#">womens swimsuits</a> <span class="bars">|</span></li> 
        <li> <a href="#">womens wetsuits</a>  <span class="bars">|</span></li> 
        <li> <a href="#">artist series</a> <span class="bars">|</span></li> 
        <li> <a href="#">blog</a> <span class="bars">|</span></li> 
        <li> <a href="#">short film</a> <span class="bars">|</span></li> 
        <li> <a href="#">photo gallery</a> <span class="bars">|</span></li> 
        <li> <a href="#">store locator</a> </li> 

    </ul> 

    <div class="right_corner"><a href="#"><img src="images/homepage_menu_rght.gif" alt="corner" /></a></div> 

</div> 

任何幫助將不勝感激。

Answer 1

如果該菜單按鈕完全保留在瀏覽器中，您可以只做一個負邊界左側，並將整個菜單（除了菜單按鈕）拉出屏幕。當用戶點擊按鈕時，你可以（使用jQuery「animate」函數）將菜單滑出。

function MenuSlideOut() { 
    $("div#Menu").animate({ 
     left: 0 
    }, "slow"); 
} 

function MenuSlideIn() { 
    $("div#Menu").animate({ 
     left: "-600px" 
    }, "slow"); 
} 

雖然沒有測試過這個代碼，但類似的東西。你可以用某種切換來代替。嘗試http://api.jquery.com