CSS Horizontal Menu

Feb 21, 2008 | css | fyd

Let's use CSS to make a Horizontal Menu. We will be using and styling an unordered list for our menu. There's not a lot to it and the code has comments by each line – so just follow along and you'll have your own menu in no time.
So, make a new .css file and name it style.css – You can use notepad and save the file as .css instead of .txt

Main Container

We start off with our main styling container. In it we will setup styles like the width of our menu – the background color – font size – and tell it we don't want any bullets next to our list items.

/* main container - ul id="menu" */
#menu
{
	margin: 0; /* reset the margins */
	padding: 0; /* reset the padding */
	width: auto; /* this size depends on your menu */
	float: left; /* line things up */
	font-size: 1.4em; /* increase the font size a bit */
	background: #656565; /* any background color you want */
	list-style: none; /* no bullets on our list items */
}

The List Items

Now we will style the list items. If you have items in your menu that aren't linked then this is where you would add any extra formatting for those. Most of the time everything in a menu is linked so all we need to do for our menu is tell it to display our items horizontally.

/* list elements */
#menu li
{
	display: inline; /* make it horizontal */
}

Our Links

Let's style our links. This is where we put in formatting like the color of our links – text decorations – and anything else you want. The padding here is important and is used to give extra space around the words – without it the menu would take the height of just slightly more than the text. The a:visited is added to make the links stay the same color even if the user has already visited a link.

/* style our links */
#menu li a:link, #menu li a:visited
{
	float: left; /* line things up */
	color: #ffffff; /* the color of our linked items */
	padding: 10px 10px; /* spread it out */
	text-decoration: none; /* no underline *//* white border to the right of link
	*/
	border-right: 1px solid #ffffff;
}

Link Hover

Now we format how the link will look when our mouse hovers over it.

/* style link hover */
/* .active_link class - optional -
styles the current pages link */
#menu li a:hover, #menu li a:active, #menu .active_link
{
	text-decoration: none; /* no underline */
	/* color to change to when we hover over link */
	background: #009900;
}

Clear The Left Margin

We had float: left above so we need to clear out the left margin so the rest of our page items will fall under our menu instead of to the right of it.

/* optional - but a good class to have in every stylesheet */
/* we had float:left; above so in order to clear out the
left margin and allow elements on our page to start under
our menu we should clear the left margin after we creat the menu
*/
.clearLeft
{
	clear: left;
}

The HTML

Open a new HTML file and add a link to our style sheet somewhere within the <head></head> tags.

<head>
<link href="sytle.css" rel="stylesheet" type="text/css"
media="screen" / >
</head>

Within the <body> tags we will setup our menu. Remember we are using an unordered list for our menu.

<!-- use an unordered list -->
<ul id="menu">
	<!-- each link goes in a list element -->
	<!-- class active_link would be moved to the link of
		whatever page you are on -->
	<!-- so if you if this was the About Us page you would
		move the class="active_link"
		within the About Us a href -->
	<li><a href="csshzmenu.html" class="active_link">Home</a></li>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>
<-- clear out left margin -
       see stylesheet for more info -->
<div class="clearLeft"></div>

There you have it – customize it to your liking and add it to your site. Here are the files for download (right-click save as)
THE HTML
THE CSS

Popularity: 16% [?]