[英]Best way to achieve jQuery scroll effect
I am having problems implementing the following jQuery effect to my navigation. 我在导航中实现以下jQuery效果时遇到问题。
There will be the following image on the top of the screen: 屏幕顶部将显示以下图像:
menu link http://img820.imageshack.us/img820/2707/linkz.jpg 菜单链接http://img820.imageshack.us/img820/2707/linkz.jpg
When the user clicks on this, the following menu should scroll out: 当用户单击此按钮时,以下菜单应滚动出:
nav http://img805.imageshack.us/img805/2383/menue.jpg 导航http://img805.imageshack.us/img805/2383/menue.jpg
my HTML is as follows: 我的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>
Any help would be greatly appreciated. 任何帮助将不胜感激。
If that menu-button is all the way left in the browser, you could just do a negative margin-left, and pull the entire menu (except for the menu-button) out of the screen. 如果该菜单按钮一直位于浏览器的最左端,则可以向左移负数,然后将整个菜单(菜单按钮除外)拉出屏幕。 When the user clicks the button, you can (with the jQuery "animate" function) slide the menu out. 当用户单击按钮时,您可以(使用jQuery“ animate”功能)将菜单滑出。
function MenuSlideOut () {
$("div#Menu").animate({
left: 0
}, "slow");
}
function MenuSlideIn () {
$("div#Menu").animate({
left: "-600px"
}, "slow");
}
Haven't tested that code though, but something like that. 虽然尚未测试该代码,但类似的东西。 You can perhaps do it with some sort of toggle instead. 您也许可以通过某种切换来做到这一点。 Try http://api.jquery.com 尝试http://api.jquery.com
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.