Create and Center a Horizontal Navigation Menu

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...

Navigation menus are usually created with an unordered list that has been styled so that it no longer looks like a traditional bullet list. Instead, it is used as the navigation menu for a web site. By arranging the list items side-by-side, you can create a very popular horzontally-oriented navigation menu.

The HTML to create a navigation menu is the same as that used to create an unordered list because the menu items in a navmenu generally do not have an essential sequence:

    <ul>
        <li><a href="#">item one</a></li>
        <li><a href="#">item two</a></li>
        <li><a href="#">item three</a></li>
        <li><a href="#">item four</a></li>
    </ul>

To convert this bulleted list into a navigation menu, keep four CSS rules in mind:

  1. the unordered list
  2. the list items
  3. the anchors within the list items
  4. the :hover state of the anchors (optional)

Manipulating the hover state (step 4) is purely aesthetic, but the first three are important to the function of the navigation menu.

To distinguish this menu/list from other lists on the page, You might uniquely identify the ul with id=”navmenu” or enclose the entire unordered list within a set of <nav>…</nav> tags.

Now, for the styling…

ul {
            list-style-type: none;
            width: 530px;
            margin: 0px auto;
            }

Three declarations were used for the unordered list. list-style-type: none will remove the bullets. width sets the overall width of the list. You’ll likely come back to this a few times because you want a width big enough to accomodate all list items side by side including spaces and borders. You won’t know this number until after you set list items widths, borders, and margins. The margin property here is used to center the nav menu horizontally. It has zero margin top and bottom and auto margins left and right.

li {
            width: 120px;
            height: 30px;
            margin: 0px 4px;
            border: 2px solid #000;
            border-radius: 5px;
            float: left;
            }

The list items within the unordered list have their width and height set. They have zero top/bottom margin and 4 pixels of left/right margin. They have a thin, black border with a little border radius. The important property of float gets the list items side-by-side, making a horizontal navigation menu.

a {
            display: block;
            width: 120px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            background-color: #EEE;
            }

Now for the anchors, the hyperlinks within the list items. They are displayed as block elements allowing us to set their width and height. This is a good one because it allows the visitor to click on a larger area of the hyperlink, not just the text. Using a line-height the same as the anchor height creates vertically-centered text. This only works for one line of text. Text-decoration is used to get rid of the underlining effect. Text-align horizontally centers the text.

Demo File(s)
navmenu-cascade1.html

Add Comment