When it comes to website navigation there are many ways to build sharp looking menus. This tutorial will show you one way to build a simple, and reusable, Horizontal CSS menu. If you are familiar with only HTML you should still be able to follow this tutorial without much trouble. If you are at all familiar with CSS, this should be a breeze!

Step 1: Building the list in HTML

Before we add the CSS that will jazz up our navigation menu we need to build it’s foundation, which is written in HTML. This list will be a basic unordered list and will include 5 items.

In line 4 we have linked our external style sheet called “styles.css”. Further down on line 8 we are telling the unordered list to get its styling instructions from the “main_nav” ID located within the “styles.css” file. This is what will override the default formatting and give us a list that looks much more appealing (not to mention less vertical) that the plain HTML.

When you view it in a browser it should look like this:

It’s hard to believe, but that will soon be a slick css navigation bar that sits near the top of your page!

Step 2: Creating the CSS

Our next step is to create the CSS that will take our vertical, unordered list and make it horizontal navigation bar.

If you’re familiar with only HTML this will look different, but you can probably follow what’s going on. I’ll run through the lines briefly. Line 1 is the ID. Line 2 is stretching the menu the width of the container that it is in. In this case, it is the browser window. Line 3 floats the list to the left nice and snug. Line 4 reduces the top, right and left margins to 0. The bottom has been left at 4em for decorative purposes. Line 5 reduces all of the padding to 0. Finally line 6 removes the bullets from the list.

Lines 9-11 are what actually make the list go from vertical to horizontal. It takes the list items and sets them next to each other on one line.

Now if you save all your files and preview the HTML page in a browser, you should see something like this:


Still not what we’re going for, but that’s ok. It has gone from vertical to horizontal though which is exactly what we were aiming for.

Step 3: Styling it up!

Now that we’ve poured the foundation and set up the frame work, we’re going to put the walls up and slap the paint on. I’ve broken step 3 into a couple sections. The first will show you how we’ve marked up the existing CSS. The next section will show you what we’re adding after what we’ve already written. Finally the last section will bring it all together so you can see the final CSS sheet complete, as well as what it should look like.

Starting on line 6, we’ve added the background color. On lines 8 and 9 we’ve added a border that is 1 pixel, solid, and defined the color. Finally line 10 defines the font that will be used for the links. We haven’t added anything to the list item.

Lines 16-29 define how the menu handles anchors (or links) and what they will do when someone hovers over them. Line 18 sets the display to block which makes the whole box for each list item an active link. The padding in line 19 spaces them out some. Line 20 removes the underline, and line 21 makes the font bold. Line 22 defines the link color. Finally line 23 adds a right border. We did not add one to the left because each box would then have borders on both sides and they would both be visible. It would give it the appearance of having twice the space between each box. Lines 26-29 handle how the menu reacts when the mouse pointer is hovered over a box specifically. Line 27 defines what color the text changes to, and line 28 defines the color the blocks background will be.

Here is a snap shot of what the code looks like on one page:

And finally, here is what the navigation bar looks like:


Comments are closed.