We recently launched Clothes Mates for Veronica McCain, an entrepreneur who developed an excellent product that allows you to quickly and easily manage your wardrobes. It’s excellent for those who like to stay organized or may be living in the fast lane. We built their entire brand from the ground up including their logo, packaging, and website. The works. One neat feature we included on the website was a dresser illustration on the sidebar of each page with sliding drawers. This effect could be created with Adobe Flash but I opted to use 100% CSS and jQuery.

Click here to see it in action

Creating the image

The dresser illustration is a drawing of a dresser with a flat front and two drawers on top of it that slide open. After you draw your dresser and drawers, we will be applying unique CSS to each piece. I drew both of these in Adobe Photoshop but the application used to design these doesn’t matter. What does matter is that you add a good 10px-15px piece of the inside of the drawer at the top of the drawer to allow for the sliding animation to work well. Test out the size of the drawer vs the dresser by placing two fully opened drawers on the top of the dresser to see how they will look together.

Markup and CSS

First thing we want to do is setup the HTML markup for putting your dresser on the page. I opted for making the dresser a CSS background-image for the top of the sidebar as it is static and will always remain there on each page.

HTML markup for the dresser

CSS markup for the dresser

#sidebartop {
	width:250px;
	float:right;	
	margin:0;
	height:272px;
	position:relative;
	padding:10px 20px;
	background:url(images/sidebartop.jpg) top left no-repeat;
}

The formatting is fairly simple and relevant to the particular site I was setting this up at. The important piece of CSS here is “position:relative;”. By making the #sidebartop parent element have a relative position value, and child elements, such as the drawers, can have an absolute position value and that will allow us to set an exact top and left setting. The drawer positioning can also be achieved using margins, but it doesn’t work in this particularly example as it conflicts with the sliding effect. We’ll visit that in a bit.

Next we need to setup the drawers. I’ll give the code for one code as an example and explain how you would work in the second one. The HTML markup for the drawer should be contained within the the div container of the dresser.

HTML markup for the drawers

CSS markup for the drawers

.drawercontact {
	position:absolute;
	top:125px;
	left:19px;
	height:73px;
	width:243px;
	background:url(images/drawercontact.png) no-repeat;
	background-position:0 -10px;
	text-decoration:none;
}

The drawer CSS has two important pieces you need to make sure you have.

1. First is the “absolute” value. Having an absolute positioned element within a relative positioned element allows you to use the Top and Left attributes to precisely position the child element. Here we have set the top value to 125px (the element is 125px away from the top of the parent div) and the left value to 19px (the element is 19px away from the left of the parent div).
2. The second important CSS attribute is the background-position. I currently have the default background position for the drawer set to “0 -10px”. This means that by default, the background image is moved up (negative) 10 pixels. By setting the height of the .drawercontact class to full image height and setting the margin to -10px, it effectively hides the top 10px of the drawer which is the inside of the drawer. This will be revealed when we add the jQuery to slide the drawer out though! It’s important make sure the div is the height of the entire drawer, inside included, as we will just be adjusting the background position with jQuery so that you see everything.

That is all the CSS you need to have your drawer properly positioned on the dresser with the inside of it hidden. The next step is the jQuery to allow a smooth transition from hidden to visible.

jQuery

The jQuery to make the smooth, Flash like opening animation on the drawers is very simple. We are setting a mouseover and mouseout state.

That’s it! You are done! The jQuery tells the browser to animate the background position from “0 -10px” to “0 0″ on mouseover. This reveals the top 10px of your drawer image, the inside of the drawer! on mouseout the background position is reset to “0 -10px”, it’s closed state. The duration attribute just says how long in milliseconds it will take to animate this effect. I opted for a slightly longer slide in animation so you could see it closing as you opened the next drawer.

Quick Tip : By putting the “.stop()” command in front of the mouse out animation, we are telling jQuery to stop it’s current animation effect in mid execution and begin executing the mouse out function. Using .stop() on most hover related functions works WONDERS because it prevents your effects from queuing up when quickly hovered over again and again.

Be sure to comment or share if you like the article! Feel free to ask any questions you may have.

Click here to see this effect in action