Making menus with Html-CSS

Posted on by

Continuing the basics of HTML and CSS, lets go further to see how CSS really changes the way of rendering the basic HTML structure. We will be creating some horizontal menus with CSS. The basic HTML structure needed is nothing but an un-ordered list.

    
   
  • Page One
    • 
   
  • Page Two
    • 
   
  • Page Three
    •

Well, since these items are going to link to some other pages or other places, we must add some links to them. After all, what is a menu item without a path or link to it! So the final structure will be as below. Note that we have put all the items inside a div with id as “nav-Menu”.

In a real scenario the “href” value would be a real URL, either relative or absolute. But that is part of the content, let us concentrate on building the menus. So all in all the HTML part is over! Thats it! Yes, thats all to it. One simple un-ordered list with links in the list items.
Lets move on to design it with CSS, so that it looks as a horizontal menu items instead of vertical lists. First things first, lets get rid of the default styling of the list items, the CSS would be as below

#nav-Menu ul
{
	list-style: none;
}

Next is to push the list items so as to they come on one line. The CSS for these would be as below

#nav-Menu li
{
	float: left;
}
#nav-Menu li a
{
	float:left;
	display: block;
	width: 9em;
}
#nav-Menu
{
	width: 30em;
}

Thats all to it. One thing to remember here is everything now is a just fine for the menus. But there would be the contents after these menu items and they will be placed after the last menu rather than below the menu items. The fix is to add a style to the next elements with 

#main-content
{
	clear: both;
}

Now its the time to add some more visually appealing style to the menu items we just created. These styles are basically margins, borders and color, so the final CSS for the menus look as below.

#nav-Menu ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav-Menu li
{
	float: left;
	margin: 0 0.15em;
}

#nav-Menu li a
{
	float:left;
	display: block;
	width: 9em;
	height: 2em;
	line-height: 2em;
	border: 0.1em solid #DCDCE9;
	
	text-decoration: none;
	text-align: center;
	
	color: #0D2474;
}

#nav-Menu
{
	width: 30em;
}

Hurray, we have just created a horizontal menu bar with menu items from a simple HTML un-ordered list.