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!

Coda Slider has been around for awhile, originally released back in 2007. But on a recent project, a client specifically requested we use it in a redesign. It’s actually really simple to customize and works well down to IE7 (although IE7 would require some CSS adjustments that I didn’t do for this tutorial. IE8 looked fine).

Coda Slider screenshot

The nicest thing about this slider is that it is basically a sliding wrapper for your HTML. You can add forms, text, images, anything you need into each panel. Other features:

  • Links and buttons are clickable.
  • You can use previous/next graphical arrows or text links.
  • You can use dynamic tabs, which is what I’ve modified in the demo.

The demo linked below shows the version of the slider I made for my client, and you can also get my customized CSS file. Download Coda Slider 3 from Github.

View Demo Get CSS Download Source

Installation

Installation is really simple, just add this to the ‘head’ section (it does need to be in the head, the slider didn’t work when I put it in the footer).

I’ve turned off arrows and turned on Dynamic Tabs; view the other advanced settings here: http://kevinbatdorf.github.com/codaslider/.

Customizing the Dynamic Tabs

The HTML element with class=”title” is used for the dynamic tabs. I used h2 and then hid this element in CSS so it won’t appear within the panel content. Then in coda-slider.css I modified .coda-nav like this to put the nav links down in the bottom right corner:

This is a very simple slider but the fact that you can use HTML in it is a big plus. It’s easy to customize too. Enjoy!