Hi guys,
I'm messing about trying to suss how to do a slide down box that appears when the user clicks a link inside a fixed header at the top. The slide function works, I think, but it will slide down and then 'jump' to the left once it has completed the sliding action.
Below is the code I am using:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#open").click(function(){
$("div.hiddenDiv").slideDown("slow");
});
$("#close").click(function(){
$("div.hiddenDiv").slideUp("slow");
});
});
</script>
<style type="text/css">
.hiddenDiv{
display:none;
height:150px;
width:200px;
background:yellow;
position:relative;
top:36px;
left:780px;
}
</style>
and the HTML:
<div id='headercontainer'>
<ul id='header'>
<li><a href='#'><img src='images/twitter.png' alt=''></a></li>
<li style='float:left;'><input type='text' id='search' value='Search...'></li>
<li><a href='#'><img src='images/facebook.png' alt=''></a></li>
<li><a id='open' href='#'><img src='images/shopcart.png' alt=''></a></li>
</ul>
<div class="hiddenDiv">
<!--Content goes in here -->
<a id='close' href='#'>Close</a>
</div></div><!-- Close Header Container -->
Any help would be greatly appreciated and of course I will post any other code if required.
Many thanks.