Question

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://img805.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.

Answer 1

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