How to Make a CSS3 Sliding Vertical Side Menu

Side Menu screenshotEarlier this week I built a little menu for a client using some CSS3 animation techniques – no Javascript. The client decided on Thursday she’d rather have the menu at the top, so… I liked mine quite a lot and turned it into a tutorial here so I reproduce it quickly when the need arises.

The menu was designed to work nicely with a full-screen background image. You can easily customize it to work with a variety of sites though.

The demo linked below shows the menu based on the one I made for my client.

View Demo

Basic Menu Setup

The parts that are highlighted are key, the rest is just a very simple menu structure.

In line 13 I’m using a semi-transparent white .png for the background of the menu items. In line 21, I move the a to the left 20px, the same distance I’ll be sliding the a’s to the right; this is so the left side of the menu item stays at the edge of the browser window when the menu item moves right, otherwise there’ll be a gap there.

Lines 27-31 control what gets animated when the user moves the mouse away from the menu item – what happens when the menu item slides back to the starting point (both the color and the translation movement) and how long it takes (0.4 seconds).

Hovers and Current Menu Item

Lines 4-6 control the distance moved (20px in the X direction, 0 in the Y) for hovered and active menu items. Likewise, lines 17-19 do the same for the current menu item.

The rest of the highlighted lines control what transitions when the user hovers or clicks a menu item. The current menu item is moved to the right (X) by 20px, but it doesn’t need a transition statement because no animation is needed.

A pretty simple example, but it works effectively and looks pretty nice. Enjoy!

Leave a Reply

Your email address will not be published. Required fields are marked *