In this quick tutorial, I'm going to discuss how to create a neat little menu effect. I'm dubbing it the liDock, because elements in the menu resize as the mouse moves over them, similar to the dock on OS-X, and because it's a list menu.

We're going to create a horizontal row of boxes containing link text. When we move the mouse over one of these boxes, it's going to get taller and the text larger and bold. I'll link to a finished example at the end of the tutorial.

Let's begin by setting up the XHTML for the menu. This is pretty straightforward and simple. We just want to make an unordered list and give it an id of "navlist".

As I said, nothing much to see there, just your basic list. Let's move on.

Now we get to the interesting part. We need to give our list menu a little CSS love.

Let's start by applying our styles for the list container itself. All we're going to do here is tell it to display the list (and its subsequently inherited list items) as inline elements and to not show any bullets or list markers.

Now we need to set up the styles for the list items. We're not doing a whole lot here but setting some basic height and widths. The rest of our visual styles will actually be applied to the links inside of the list item.

As you can see, we're creating a 60×60px square and then floating all of the elements so they'll line up horizontally.

Now that we've done that, we need to style our links. This is where it gets long and complicated (well, as complicated as this tutorial gets, anyway), so we'll break it down a bit.

We're going to start by defining our width, height and padding. We want the overall width and height here to be 10px less than our container (li) width and height, because we're adding a 5px margin that gets added in. We also need to make it display as a block level element, or the height property won't be applied correctly.

Now let's do some visual styling on the font. We also set the line height to the height of our element (a), so that the text is centered vertically in the box. Finally we give it a centered horizontal alignment as well.

Now let's do the borders. We want a 1px border on the left and right sides of our boxes. In this case, we'll use white, because that's our background color. We also want a 5px border on the top and bottom that will also be white. Changing the color of the horizontal borders is how we're going to get our "resize" effect (Note: the reason I'm using borders on the left and right is because that lets us have some visual space between elements without running into IE's double margin/float bug). I'm also going to set the background color for the link element.

Got all that? Ok, good. That's the hard part and it's over with. We only have one more style to create the list item link's :hover event. It's fairly straightforward. We want to change the color of the top and bottom borders so our box appears to resize, and we want to change the font size and weight so that it grows. We're also going to do a subtle change in the background color (which the borders need to match).

There you have it. Our finished menu. You view the final example and get a look at the completed code.

Posted Thursday, January 18th, 2007 at 3:00 am in Menus | Trackback