Javascript 实现jQuery滚动效果的最佳方法

我在导航中实现以下jQuery效果时遇到问题

屏幕顶部将显示以下图像：

当用户单击此按钮时，应滚动出以下菜单：

我的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>

|
|
|
|
|
|

---

任何帮助都将不胜感激。

如果该菜单按钮一直留在浏览器中，您可以只做一个负边距，然后将整个菜单（菜单按钮除外）从屏幕中拉出。当用户单击按钮时，您可以（使用jQuery的“动画”功能）滑出菜单

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

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

虽然还没有测试过该代码，但是类似的东西。你也许可以用某种开关来代替。试一试