Best way to achieve jQuery scroll effect
<p>I am having problems implementing the following jQuery effect to my navigation.</p>

<p>There will be the following image on the top of the screen:</p>

<p><img src="http://img820.imageshack.us/img820/2707/linkz.jpg" alt="menu link"></p>

<p>When the user clicks on this, the following menu should scroll out:</p>

<p><img src="http://img805.imageshack.us/img805/2383/menue.jpg" alt="nav"></p>

<p>my HTML is as follows:</p>

<pre><code>&lt;div class="left_corner"&gt;&lt;img src="images/homepage_menu_lft.gif" alt="corner" /&gt;&lt;/div&gt;
 &lt;div class="header_buttons typeface-js" style="font-family: Palatino LT Std"&gt;

  &lt;ul&gt;

              &lt;li&gt; &lt;a href="#"&gt;womens swimsuits&lt;/a&gt;  &lt;span class="bars"&gt;|&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;womens wetsuits&lt;/a&gt;     &lt;span class="bars"&gt;|&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;artist series&lt;/a&gt;  &lt;span class="bars"&gt;|&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;blog&lt;/a&gt;  &lt;span class="bars"&gt;|&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;short film&lt;/a&gt;  &lt;span class="bars"&gt;|&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;photo gallery&lt;/a&gt;  &lt;span class="bars"&gt;|&lt;/span&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;a href="#"&gt;store locator&lt;/a&gt; &lt;/li&gt;

  &lt;/ul&gt;

  &lt;div class="right_corner"&gt;&lt;a href="#"&gt;&lt;img src="images/homepage_menu_rght.gif" alt="corner" /&gt;&lt;/a&gt;&lt;/div&gt;

 &lt;/div&gt;
</code></pre>

<p>Any help would be greatly appreciated.</p>
