Code Conquest

You are here: Home / How to Create a Website Navigation Menu

How to Create a Website Navigation Menu

For every website, a menu is a must. So this tutorial will be guiding you through the process of creating an elegant navigation menu with HTML and CSS in no time.

For the purposes of this tutorial, we’ll be basing our design concept on the Apple website navigation menu, as it’s simple, clean and effective. Let’s get to it!

Start with the HTML

To create our HTML code, we’ll be using the <nav> element with a series of anchor-wrapped <div> elements inside. Because the <nav> tag is new in HTML5, you’ll want to have <!DOCTYPE html> at the top of your file.

Here’s an example of the HTML code required for a navigation menu:

<nav>
 <a href="#"><div>Home</div></a>
 <a href="#"><div>About</div></a>
 <a href="#"><div>Contact</div></a>
 <a href="#"><div>Sitemap</div></a>
</nav>

You can have as many links in your menu as you like. In the href="" attribute, just replace the # symbol with the page you want to link to. It’s also important that each <a> tag is on the outside of each <div> tag, not the inside. This will ensure that not only the text but also the padding around it will respond to clicks.

In this case we don’t need to worry about classes or IDs, so we can now move on to the CSS.

Move on to the CSS

In the CSS code there are a few things you’ll want to specify:

  • Set the width of each <div> – we’ve used 119px.
  • Specify the font and font size and make sure the text is center aligned.
  • Give each <div> a border of 1 pixel.
  • Set the top and bottom padding in each <div> to about 10 pixels.
  • Make sure every <div> is marked float: left; so that they are side by side, not stacked.

Here’s the example CSS code:

nav {
    font-size: 14px;
    font-family: georgia;
    text-align: center;
}
div {
    width: 119px;
    border: solid 1px;
    float: left;
    padding: 10px 0;
}

Round off the corners and fix the borders

Going back to the Apple navigation menu, you’ll see that their navigation bar boasts rounded corners. Implementing this is a bit tricky, because you only want to target the first and last box. To do this, we use the :first-child and :last-child selectors, on the <a> tag, not the <div>, because it’s in fact the <a> tags that are the first and last children of the <nav> tag.

a:first-child div {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
a:last-child div {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

One problem we have at this stage is that the borders of the boxes are doubling up in the middle. To fix this, just set border-left: none; for all <div> tags and then restore the left border in your :first-child selector only.

Color it in

Now it’s time to color it in. The Apple menu uses images for this, but we’ll be using CSS as it loads faster and takes up less file size. Use your hex code knowledge to set the colors of the borders and backgrounds.

To set a gradient to get a 3D effect, you’ll want to use the CSS linear-gradient() function. The first hex code you set is the top color and the second is the bottom color. Unfortunately, there’s not yet uniform support for this function across all browsers, so you’ll need to set the gradient separately for each major browser, as well as a single color if a browser does not support gradient, like so:

background: #fb0
background: -webkit-linear-gradient(#fb0, #950);
background:    -moz-linear-gradient(#fb0, #950);
background:     -ms-linear-gradient(#fb0, #950);
background:      -o-linear-gradient(#fb0, #950);
background:         linear-gradient(#fb0, #950);

Change the color when hovering

Boxes in the Apple menu change color when hovered over. To get this effect, use the a:hover selector and set the background the same way as before, with multiple browser support if you’re using a gradient. You can set the top color in your gradient to be darker than the bottom color, for a hollowed out look.

Have any questions regarding the creation of this menu? Let us know!



Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.

Deals, Discounts and Coupons

Deals