Best way to achieve jQuery scroll effect
I am having problems implementing the following jQuery effect to my navigation.
There will be the following image on the top of the screen:
menu link http://img820.imageshack.us/img820/2707/linkz.jpg
When the user clicks on this, the following menu should scroll out:
nav http://img8开发者_如何学JAVA05.imageshack.us/img805/2383/menue.jpg
my HTML is as follows:
<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.
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
精彩评论