How to make this into a sliding left/right div

问题

Provided below is a snippet from my html and css code, how and what would I need to add in not only html and css, but javascript as well to make this work as a slide in/out in the direction of (right to open) and (left to close) div?

<div id="left">
    <a href="#">Edit Profile</a>
    <a href="#">Settings</a>
    <a href="?logoff">Sign Out</a>
</div>

#left { width: 338px; border-left: 1px solid #333; float: left; }
#left a {
  width: 145px;
  height: 22px;
  padding: 5px 12px;
  margin: 0;
  border-bottom: 1px solid rgba(204, 204, 204, 0.09);
  float: left;
  display: inline-block;
  position: relative;
  top: 34px;
  color: #15ADFF;
  font: 16px Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-variant: small-caps;
  text-shadow: -1px -1px 1px #000, 2px 2px 3px rgba(110, 110, 110, 0.7);
}
#left a:hover {
  width: 138px;
  background: rgba(204, 204, 204, 0.4);
  border-right: 7px solid #15ADFF;
  color: #111;
  text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.4);
}

I currently do not have any javascript written up for this as I do not know where to start with it...I am, however, using jquery-1.3.2

EDIT: If anyone can provide a jsfiddle, I'd greatly appreciate it ;)

来源：https://stackoverflow.com/questions/18172716/how-to-make-this-into-a-sliding-left-right-div