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

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

1 个答案: