Page 1 of 1

CSS Menu Design Basics Rate Topic: -----

#1 Lemur  Icon User is online

  • Pragmatism over Dogma
  • member icon


Reputation: 1372
  • View blog
  • Posts: 3,470
  • Joined: 28-November 09

Post icon  Posted 09 December 2009 - 10:30 PM

CSS Based Menu Design

Menu design is a crucial element of your site, if a menu is not clear, concise, to the point, and visible it will certainly have negative impacts on your site and make it a cumbersome experience for the users who attempt to navigate it.

Using CSS creating a menu can be easy to both create and manipulate without the use of images that you need to put new text on for every new link. As with all CSS one html block can make millions of possible menus, even without images.

The standard html for a menu would be as follows:
<div id="Menu">
<ul>
	<li><a href="#">Test</a></li>
	<li><a href="#">Test</a></li>
	<li><a href="#">Test</a></li>
	<li><a href="#">Test</a></li>
	<li><a href="#">Test</a></li>
	<li><a href="#">Test</a></li>
</ul>
</div>



This is the way I normally create menus and is the most effective I've used for structure.

Styling a Menu is rather easy with some basic css and psuedo-tags for mouse over effects (no javascript required)

A sample CSS for the above:
#Menu {text-align:left; margin:0; padding:0;}
#Menu a{
	display:block;
	color:#020202;
	text-decoration:none;
	padding:2px 5px;
	margin: 0;
}

#Menu ul{
	display:block;
	list-style: none;
	margin: 0;
	padding: 0;
	width:130px;
}

#Menu ul li{
	display:block;
	margin:0;
}

#Menu ul li a{
	display:block;
	margin: 0;
	border-left: 5px solid #1c24b2;
	background:#91ace5;
	}

#Menu ul li a:hover {
	border-left: 10px solid #91ace5;
	display:block;
	padding:2px 8px;
	color:#000000;
	background:#c9daf5;
}



Breakdown

We start with the first statement:
#Menu a{
	display:block;
	color:#020202;
	text-decoration:none;
	padding:2px 5px;
	margin: 0;
}



This styles the A tag to display as a block format (See below for Block/Inline explination )

Next we style the list:
#Menu ul{
	display:block;
	list-style: none;
	margin: 0;
	padding: 0;
	width:130px;
}

#Menu ul li{
	display:block;
	margin:0;
}





By setting no list style bullets are removed, the width of the menu is set to 130 px.

Now we move onto the actual buttons:
#Menu ul li a{
	display:block;
	margin: 0;
	border-left: 5px solid #1c24b2;
	background:#91ace5;
	}

#Menu ul li a:hover {
	border-left: 10px solid #91ace5;
	display:block;
	padding:2px 8px;
	color:#000000;
	background:#c9daf5;



The Border Left is nothing more than decoration, it can be removed or changed. The background sets the box color around the link, and the padding on the A element set above determines the size of the button (via padding.)

By using the psuedo class hover we can change the style when someone hovers over the link. In this case the left border gets larger, the background color turns lighter, and the text is pushed over by increased padding.

Do you want to use an image or a gradient instead? It's no issue, just set the background element to:
background:url('image.png') no-repeat;


Or if it's a gradient then you can repeat it across (repeat-x) or vertical (repeat-y.)

There are two main styles of Menus that are common in web design, the Vertical Menu and the Horizontal Menu. The Vertical is as the css stylesheet above, displaying block. By changing this to display:inline; the menu becomes horizontal, though I would suggest changing the style of it. Pipe characters work exceptionally well as dividers in Horizontal menus ( | ).

And that's all there is to the basics of menu design, next tutorial will cover multi-dimensional menus with only css.

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Menu Design Basics

#2 3G Alarm  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 31-May 09

Posted 26 December 2009 - 07:11 PM

good tutorial m8 thank you
Was This Post Helpful? 0
  • +
  • -

#3 jwoody23  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 28-December 09

Posted 28 December 2009 - 04:02 PM

awesome. Nice tutorial
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1