jquery slideToggle's position

Question

I have a menu div to put the menu list inside

<!--menu-->
 <a href="#"><div id="menu-tab">Menu</div></a>
 <div id="menu">
  <ul>
   <li><a href="#">a</a></li>
   <li><a href="#">b</a></li>
   <li><a href="#">c</li>
  </ul>
 </div>

for the css

#menu {
width: 220px;
border: 2px solid #004990;
float: right;
margin-right: 15px;
margin-top: -52px;
}

here is the javascript/jquery

$('#menu-tab').click(function(){
 $("#menu").slideToggle("normal");
});

becuase margin-top: -52px;(which I control the menu position in the page), therefore each time when I click the menu tab, the #menu will slide from -52px. how can I let it slide from 0px?

Answer 1

Have you tried modifying the style before animating it? Set the margin-top to zero right before you do your sliding.

$('#menu-tab').click(function(){
    $("#menu").css("margin-top","0px"); //this should set your menudiv to margin-top:0px
    $("#menu").slideToggle("normal");
});