When icon clicked, one field form slides out

[Tudum]

Hey folks!
Basically, i need help with one tiny thing.I have a menu with 4 links in it and a small email icon next to it.Here is the code
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a> </li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<img src="images/subscribe.png" width="22" height="22">

Now, when user clicks on this icon, i would need to make one filed form (for email) to slide out (left from icon) and allow user to enter his email and click send.Also, that form should be able to close when clicked again on the icon.
I know this is a lot of stuff, but is there somebody that could help?

I think this is just a few lines of JS/jQuery, but i dont know it
Can anyone help?

[Webzarus]

You're on the right track, you would need to use jquery to accomplish the "slide out", but you'll also need CSS for the styling.

It's not a "copy / paste " answer either. The CSS styling part will be wholly dependant on the rest of the HTML and CSS in the page to get it right, then there will be a JavaScript function to call the event action.

[Tudum]

Webzarus, thanks a lot.I know, i would have to create separate div tag that would hold on the form.
This is the CSS of the navigation bar:
#navigation {
clear: both;
vertical-align: top;
margin: 0px 0px 0px 25px;
padding: 0px 0px 0px 0px;
height: 35px;
}

Now, as i get it i would have to create separate DIV for form, like this
<div id="slideform">
<form>
<input name="email" type="email" placeholder="Enter your e-mail...">
<input name="submit" type="button" value="Send">
</form>
</div>

Some CSS to set its width and height, but how to position it over the icon and make it slide out?
I know im asking for too much help, but is there any way that you have 5 mins to help me?