javascript - 实现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“动画”功能)将菜单滑出。

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

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

虽然还没有测试该代码，但类似的东西。你也许可以用某种切换来代替。尝试 http://api.jquery.com