demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Horizontal decorated navigation bar screenshot

Decorated Horizontal Navigation Bar

css / navigation

Estimated reading time: 4 minutes, 46 seconds

Taking the same unordered list as our previous example, let’s turn it into a horizontal navigation bar, but with a little more decoration than our earliest demonstration of the concept.

The markup remains unchanged:

<ul id=nav>
<li><a href=index.html>Home</a>
<li><a href=about.html>About Us</a>
<li><a href=contact.html>Contact Us</a>
<li><a href=products.html>Our Products</a>
<li><a href=order.html>Place An Order</a>
<li><a href=privacy.html>Your Privacy</a>
</ul>

To comprehend what we are about to do, it is vital to understand the structure of our document. The <ul> tag is a block-display element that is a container for a series of <li> elements. If the <ul> tag could be thought of as a parent, the <li> elements inside of it could be considered its children: the <ul> element is required to give “birth” to them, and embraces its six children as a group.

Each <li> element is also a block-level element. Each <li> contains a single <a> link. Each link has some text content.

Because of the display: block default property of each <li> element, each link appears on a separate line. As a first step, let’s change that to create a horizontal navigation bar. While we could write a style for <li> elements, that would be far too broad a rule, affecting <li> elements in every context, whether inside an <ol> or <ul> tag. Neither is it effective to write an inline style for each <li>. Instead, we’ll use the fact that the parent <ul> has a unique id and use a descendant selector to make our style specific:

ul#nav li { display: inline; }

That rule makes each <li> element display inline rather than the default block, so that they are now side-by-side. Now, however, the text of each link runs into the next: we need to add a little space to each. Again, we will be specific, and use a series of descendant selectors:

ul#nav li a { padding-left: 1em; padding-right: 1em; }

This spaces the links out nicely. Before we completed this step, you may have noticed that the first list item was indented slightly from the left. This is a leftover from the browser’s default CSS: by definition, an ordered or unordered list is slightly indented from the left. To remove this indentation, we must work on the <ul> itself:

ul#nav { padding-left: 0; }

You may find that you will also need to set margin-left and text-indent to 0 for this element, as different browsers use different properties to indent lists.

If we wanted to have a vertical line divide the links from each other, we don’t add characters or markup: our rule is to avoid adding extra content or elements, especially when they are only being added for presentational purposes. Instead, we will use CSS on each <li> element, adding to the style declaration we already have in place:

ul#nav li { display: inline; }

The links in our nab bar still look a little plain. We can change their appearance, with the understanding that the more we alter the presentation of links the less likely they are to be recognized as such:

ul#nav li a { color: #000; text-decoration: none; font-family: Arial Narrow, Arial, sans-serif; }

It is also common to add a hover effect to links in a navigation bar. We will do this by writing a style declaration for a pseudo selector to the links, essentially reversing the colours:

ul#nav li a:hover { color: #fff; background: #000; }

When we specify :hover for an element we should also specify :focus, as the disabled won't be using a mouse to navigate your document, but a keyboard, which does not hover over links. So the declaration has a group selector added to it:

ul#nav li a:hover, ul#nav li a:focus { color: #fff; background: #000; }

You may discover that the highlight background colour that appears when you hover over each link falls just short of the divider line to its right. The cause of this is obscure: it’s not the CSS. Rather, it is to do with our HTML.

In our first discussion of HTML I said that spaces and returns don’t matter: that HTML ignores anything more than a single space and that returns without markup don’t make any difference. That remains true… except in this case.

Because of the returns between each line of our <li> elements, the browser inserts a space at the end of each list items. It is these spaces that you are seeing outside the highlight area. To get rid of them, we can simply eliminate the returns between our list items:

<ul id=nav><li><a href=index.html>Home</a><li><a href=about.html>About Us</a><li><a href=contact.html>Contact Us</a><li><a href=products.html>Our Products</a><li><a href=order.html>Place An Order</a><li><a href=privacy.html>Your Privacy</a></ul>

We are using border-left to show divisions between navigational elements, but the first link – Home – should not have a line to its left. We can achieve this with a clever use of a CSS adjacent selector:

ul#nav li + li { border-left: 1px solid #787878;

This causes every list ite, immediately after the first li to have a border to its left.

Finally, if you wanted the navigational bar to be centred as a whole on the page, remember that the unordered list is a box of its own:

ul#nav { text-align: center; }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.