How to build horizontal navigational menus

• Download build-navigational-menu.zip-7.53KB

Introduction

Almost every website on the Internet has a navigational menu constructed horizontally or vertically. Simple or more complex with drop-down sub-items, it's presence is necessary to lead the visitor(s) to the desired information inside the website. There are quite enough methods to build navigational menus, and I'll give my opinion on few of them.

Use of table for building the menu.

HTML element <table> has the advantage of being well implemented in all major browsers, so no displaying issues when it’s content is deployed. The idea is tendsimple, to create only one table row, with one data cell for each item menu. Using the CSS style attributes the menu will get the appearance it needs.

The HTML code is a follows:

<table> <tr> <td><a href="">Item 1</a></td> <td><a href="">Second Item</a></td> <td><a href="">Third One</a></td> <td><a href="">Item 4</a></td> <td><a href="">Fifth in the row</a></td> <td><a href="">LastItem</a></td> </tr> </table>

We can add some style to the table appearance and be sure you set the border-collapse property to collapse so no spaces are between data cells and borders are collapsed into a single border when possible. A detailed presentation of this style property can be found at W3 Schools CSS border-collapse property page (http://www.w3schools.com/Css/pr_tab_border-collapse.asp).

Using unordered list items to create navigational menu.

Using the items of an unordered list to create the navigational menu is, maybe, the most used technique. Comparing with the previous method it requires almost the same number of lines for CSS styles, and the effect is similar. To display items horizontally you can use the display:inline style property, so the elements of the unordered list are displayed on the same line, like a row of elements.

Setting the item elements to be displayed as inline elements, make them "unmovable" on y axis, which means that using padding or margin property to arrange the way they are displayed has no effect. But giving some values to height or/and line-height properties this issue can be easily handled.

Another way to display the elements on the same row is to float the list-items of the unordered list to left. This method tends to be more desired then the previous and the result is much similar with the menu created using table elements. Using background images for the elements of the menu creates a nice and more desired visual effect. Even if you use a repeated background image or you create a little more sophisticated rounded corner button for your menu you definitely add a bit of color to the (maybe) flat HTML page. In the next line I'll give some hints on how to create these rounded corner buttons.

Using rounded corner buttons for the navigational menu

The simplest approach may be to create a button with a given width and height and use it as a background image for each item of the menu. This will work fine in situations when the text of the menu items has the same length or the differences are insignificant.

Split image for the background.

Another method is to split the images in two parts and build the menu items using besides the anchor element an additional span element.

The code for the menu will look like:

<ul id="split"> <li><a href=""><span>Item 1</span></a></li> <li><a href=""><span>Second Item</span></a></li> <li><a href=""><span>Third One</span></a></li> <li><a href=""><span>Item 4</span></a></li> <li><a href=""><span>Fifth in the row</span></a></li> <li><a href=""><span>Last Item</span></a></li> </ul>

The idea is to set the display:block property for anchor and span elements, and using the padding values the items are displayed correctly with the desired effect, which means that the width of each item will follow the length of the text. Note that the image on the right side in this case should have a width which is greater than the length of the text with the values for the left and right padding added; otherwise the background image will be broken.

Using two span elements for the right and left margins.

In this case the image is split in three parts, one for the right margin, second for the left margin and the third one for the middle. This last one image may have a width as small as possible, because it can be repeated on x axis.

The HTML code of the menu will be as follows:

<ul id="split3"> <li><a href=""><span><span>Item 1</span></span></a></li> <li><a href=""><span><span>Second Item</span></span></a></li> <li><a href=""><span><span>Third One</span></span></a></li> <li><a href=""><span><span>Item 4</span></span></a></li> <li><a href=""><span><span>Fifth in the row</span></span></a></li> <li><a href=""><span><span>Last Item</span></span></a></li> </ul>

The good part for this method is that the padding values can be set just for the last span element, and this is enough to reach the desired effect. Even we have more CSS and HTML code for this last method I think is more simple than the previous one, because you don’t have to tweak padding values to have all elements aligned.

And this is the CSS code for all types of menu:

/***** General CSS style *****/ a{ outline:none; text-decoration:underline } ul{ background:inherit; list-style:none; margin-top:10px; margin-bottom:10px } a:hover{ text-decoration:none } table{ margin-top:15px; margin-bottom:15px; background:#45ed67; border-collapse:collapse } td{ padding:4px 4px 5px 4px; margin-left:0 } td a, li a{ color:#ffffff } /***** Items displayed as inline elements *****/ ul#unordered, ul#floated{ background:#45ed67; width:482px; height:26px } ul#unordered li{ display:inline; padding:4px 2px 0px 2px; line-height:24px } /***** Items displayed as floated elements *****/ ul#floated li{ float:left; padding:2px 4px 0px 4px } /***** One background image for the menu items *****/ ul#button li{ background:url(images/buttons.png) no-repeat 0 0; float:left; margin:0; padding:4px 3px 0 3px; width:120px; height:26px; text-align:center } ul#button li:hover{ background:url(images/buttons.png) no-repeat 0 -30px; color:#45ed67 } ul#button li:hover a{ color:#45ed67; text-decoration:none } /***** Split Image for the background of the items *****/ ul#split li{ float:left; height:30px } ul#split li a{ display:block; background:url(images/left_split.png) no-repeat top left; padding:0 1px 0 9px } ul#split li a span{ display:block; background:url(images/right_split.png) no-repeat top right; padding:4px 8px 8px 1px } ul#split li a:hover{ background:url(images/left_split.png) no-repeat 0 -30px; color:#45ed67 } ul#split li a:hover span{ background:url(images/right_split.png) no-repeat right -30px; } /***** Background image split in three parts *****/ ul#split3 li{ float:left; height:24px } ul#split3 li a{ display:block; background:url(images/middle_split.png) top repeat-x; margin-right:1px } ul#split3 li a span{ display:block; background:url(images/right_span_split.png) top right no-repeat; } ul#split3 li a span span{ background:url(images/left_split.png) top left no-repeat; padding:4px 9px 8px 9px } ul#split3 li a:hover{ background:url(images/middle_split.png) 0 -30px repeat-x; color:#45ed67 } ul#split3 li a:hover span{ background:url(images/right_span_split.png) right -30px no-repeat } ul#split3 li a:hover span span{ background:url(images/left_split.png) 0 -30px no-repeat }

In the archived attached you will find these menus examples in a HTML page. The resulted page was tested on Firefox v3.0.9., Internet Explorer v6.0, v7.0 and v8.1, Opera v9.63, Safari v3.2.1 and Google Chrome and no issues are present when the menus are displayed.

License

This article, along with any associated source code and files, is licensed under The Intelliproject Open License (IPOL)

About the author