Horizontal Menus That Grow on You


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”.

[html]

[/html]

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.

[css]ul#navlist {
display: inline;
list-style: none;
}[/css]

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.

[css]ul#navlist li {
float: left;
width: 60px;
height:60px;
}[/css]

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.

[css]ul#navlist li a {
width: 50px;
height:50px;
padding:5px;
display:block;[/css]

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.

[css] color:#fff;
text-decoration: none;
font-size:7pt;
font-family:arial;
line-height:50px;
text-align:center;[/css]

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.

[css] border-right:1px solid #fff;
border-left:1px solid #fff;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
background: #003663;
}[/css]

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).

[css]ul#navlist li a:hover {
border-top: 5px solid #004a80;
border-bottom: 5px solid #004a80;
background:#004a80;
font-size:9pt;
font-weight:bold;
}[/css]

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

Blogging

{ 21 comments… add one }

21 comments on “Horizontal Menus That Grow on You

  1. Nice Tutorial!
    ^-^

  2. web designer roxy on said:

    good tutorial…!!

  3. Not bad!!

  4. That was fun, thank you.

  5. How do you center it ? I’ve tried everything

  6. CSSHowTo.com on said:

    Its a little difficult to explain quickly, but I will try.

    Essentially you need to put the menu inside two divs, and float the outside div 50% left and the inner div -50%. You also need to add position relative. Im not sure how you have implemented the menu so its hard to give exact advice, but hopefully the following code might help. Use firebug and have a play with changing the settings.

    .outer{
    position:relative;
    left:50%;
    float:left;
    clear:both;
    }
    .inner{
    position:relative;
    left:-50%;
    }

  7. Sandy on said:

    Is there a way to set up this menu so that when it’s wider than the browser window it doesn’t break down but instead the user has to scroll horizontally?

  8. Excellent tutorial!

  9. Myea Amelia on said:

    Thanks for the tutorial, it is help me much.

  10. Kayla Felisha on said:

    simple tutorial, but i got the point, thanks

  11. Gustav on said:

    If you want an easy way to center a menu, just do it in plain html.
    Create a div for the menu then put “” before the div so that it automaticly centers the menu.

    It’s the easiest way :)

  12. Silven chen on said:

    Is’s so good

  13. Thank your Help me ! csshowto!

    My is chinese(china) !

  14. austin web designer on said:

    Really nice tutorial,I will make sure to use it on the next site I make.

  15. 星星魔术博客 on said:

    good, so nice

  16. 无忧技术网 on said:

    very good Tutorial,wish for more articles like this!!

  17. Frankie on said:

    Would it be possible to write a tutorial on how to create a menu with a submenu?

    Thanx in advance!

  18. Wow this is amazing!

  19. Hi Dear, Thank you very much for uploading such a nice tutorial. It’s help me a lot, Keep doing this… Eagle View Creation

  20. İzmir Lazer Epilasyon on said:

    good tutorial.thank you

  21. theFr3lancer on said:

    Thank you for the tutorial, I just want to know how to make active links

Leave a Reply

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

*

HTML tags are not allowed.

Leave a Comment