Tutorial: Blocked Navigation

It's not the first time I have had questions about how I did this or that on my website. In most of the cases I point the ones asking to a specific website or article I used as a guidance or for inspiration, like for instance the countless articles on A List Apart. But why not write a quick guide or tutorial myself?

Let's start relatively simply, in this case with the question how I did my navigation or menu. And especially the hover-block effect. First let's make the basic structure of the navigation menu. Ofcourse to avoid the discussion in advance, let's do it the way it is supposed to be done. The way every important key-figure on the internet has agreed upon. With an XHTML list.

<ul id="navigation">
  <li><a class="about" href="/about.php">About</a></li>
  <li><a class="contact" href="/contact.php">Contact</a></li>
  <li><a class="links" href="/links.php">Links</a></li>
  <li><a class="photos" href="http://flickr.com/photos/bramn/sets/" target="_blank">Photos</a></li>
  <li><a class="archives" href="/archives.php">Archives</a></li>
  <li><a class="home" href="/">Home</a></li>
</ul>

First we make sure we can address this specific list in our CSS file by giving it an ID 'navigation'. Also let's make sure each item has its own unique class name for future purposes. Let's give the list an horizontal layout without those ugly bullets first.

ul#navigation li {
float: left;
list-style: none;
}

As you can see, it pretty much looks like crap and unreadable right now. The links are still inline items, so we can't do much with them now. We want them to appear more like block elements so let's make them act that way. Also let's add some padding to the links to give them more body. Another option would be to give all items a fixed width.

ul#navigation li {
float: left;
list-style: none;
}

ul#navigation a {
display: block;
padding: 5px;
}

We're pretty much done right now. All is missing is some color, a nicer font type and most important the hovering and the 'current-page' effect. The hovering effect is easily obtained using the pseudo class :hover for the links and with that changing for instance the background color of the anchor tag.

ul#navigation li {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: left;
	list-style: none;
}

ul#navigation a,
ul#navigation a:link,
ul#navigation a:active,
ul#navigation a:visited {
	text-decoration: none;
	display: block;
	padding: 5px;
}

ul#navigation a:hover {
	background-color: #FF0;
}

With the second effect, the 'current-page' feature, the unique class names of each link come into play. We want to see the same style attributes for the link, as when it's hovered over. This time only when the corresponding page is viewed. But how do we distinguish the XHTML page we're looking at? Let's give the body tag of the XHTML page its own ID! For instance <body id="home"> when viewing your index XHTML page.

Using an ID for your entire XHTML page instead of just giving the 'active' link a class named something like class="active" makes sure we can insert the same XHTML codeThen all that is left is adding a little bit of extra to our CSS file:

#home #navigation a.home,
#contact #navigation a.contact,
#links #navigation a.links,
#photos #navigation a.photos,
#archives #navigation a.archives,
#home #navigation a.home,
ul#navigation a:hover {
	background-color: #FF0;
}

That should do the trick. You can find a sort of demo XHTML page with the CSS right here: Blocked Navigation Demo. Ofcourse only the basics have been covered here. To come up with something more like my navigation menu, you'll need to change the colors and use background images, but that is something you can find out yourself. Go try it yourself and don't hesitate to ask questions.

bramn

When just a first name is not enough!

Tutorial: Blocked Navigation

Only 1 comment