27 Nov Horizontal Navigation Menus
Some cool CSS website design trickery to make horizontal menus at the top of a site automatically stretch to fill the entire width of the layout.
A common problem we are faced with when doing a horizontal navigation bar is making the bar stretch the full width of the layout. A long, long time ago in the days of table layouts this wasn’t a problem, as a table can be set to width 100% and the width of each cell will then be auto adjusted to fill up the entire width. Of course, a navigation bar is really a list instead of tabular data, so to be semantically correct we have to use a <ul> or <ol> tag and then place each item in an <li> tag. This creates all kinds of problems however, because even if we set a <ul> to a width of 100%, the <li> tags inside it will not stretch to fill up the full width. We could manually set a width on each item, but that requires a lot of math (which I’m not very fond of unless it’s absolutely necessary) and if we add another item to the navigation, now we have to do math all over again and change the width of each item.
So what is the solution? A little CSS web design trickery and we can convince the browser that our <ul>and <li> tags are tables. Before I go into the details of how to make this work, let’s go over why this works and still adheres to the current standards. Although I am not a semantics fanatic that spends countless hours making sure every address in my HTML is wrapped in an <address> tag, it is important to place the major elements of our site in the appropriate tags so search engines and screen readers will be able to understand the markup.
A navigation bar is essentially a list, and therefore it should be contained in the markup used to represent a list. Search engines, screen readers, and the like (which is the whole reason we are concerned with semantics in the first place) do not pay any attention to CSS. They are only concerned with the content (HTML markup) and not the presentation (CSS). That being said, let’s take a look at what the HTML should look like to satisfy these requirements.
<nav>
<ul>
<li><a href=”/”>Home Page</a></li>
<li><a href=”/about-us”>About Us</a></li>
<li><a href=”/contact-us”>Contact Us</a></li>
</ul>
</nav>
Notice the <nav> tag. This is something new with HTML5 and some older browser’s will not recognize it. Obviously we should use a <nav> tag for our navigation, but if backwards compatibility is important you can replace this with a <div id=”nav”> … </div>.
Now comes the fun part. Remember that the devices we are trying to impress with our semantics do not care one bit about the CSS. So we use CSS to tell the browser that our list should be treated as a table. This is actually quite simple using the following CSS.
/* this selector could be div#nav instead of nav depending on which tag you wrapped the ul in */
nav {
display: table;
width: 100%;
border-collapse: collapse;
border: none;
}
nav ul {
display: table-row;
}
nav li {
display: table-cell;
margin: 0;
}
Let’s go over what’s happening here. Thinking in terms of a table, we would need three layers of tags (table, tr, and td) with the content being inside the <td> tag. Using the CSS display property we can set our <nav>, <ul>, and <li> tags to behave as if they were these table elements using the values of “table”, “table-row”, and “table-cell”, respectively. Now a browser will treat our navigation bar as a table and the width of each list item will be auto adjusted so the combined width of the list items equals the full width of our layout. Pretty cool, and we didn’t have to do any math!
Of course, you will want to add some additional styles to make your navigation bar look pretty, but using the above examples will result in a navigation bar that nicely stretches to the full width of your layout, even when you add or remove items from the navigation. Another really big advantage to this technique is it works with responsive website design layouts. In the next few articles we’ll go into some details of responsive website design and look at some examples.