UPDATE: This article is now out of date with the current iteration of the site. To see the header as it was at the time of writing please visit this page.
We’ve had a few requests for articles on the site lately, and more and more of them are asking about the design of the site itself. So for today I thought I would detail how I designed the header for Superposition Kitty. An initial warning: I have no idea how many browsers this works in (as my usual testing procedure of using Browser Shots is no help for hover states), however it should work for all the major browsers, even IE6. Secondly: This code — or more specifically, nesting a <div> between <ul> and <li> elements — is not XHMTL valid.
I spent a lot of time worrying about the second part until I realised the validity of my code had absolutely no effect on how the site is displayed to visitors. This doesn’t mean you should just throw validation out the window — at the very least it is a great way to discover hidden errors in your code, or why something isn’t displaying as you think it should — but I just don’t believe it is as important as I once did.
Headers in WordPress are a relatively simple affair. If you want to brush up on the basics then I would recommend checking out the excellent WordPress Codex article on designing headers. The header for Superposition Kitty is based on Son Of Suckerfish Dropdowns, which is in turn based on the groundbreaking A List Apart article: Suckerfish Dropdowns. Reading through both of those articles (which I heavily recommend) will give you a good grounding in how to style lists as a horizontal (or even vertical) menu.
First up we have the HTML code, which will traditionally go directly after the <body> tag in the header.php file in your WordPress directory:
<div id="head"> <div id="navigation"> <ul> <li><a href="#">#</a></li> <li><a href="#">#</a> <ul> <div class="center"> <li><a href="#">#</a></li> <li><a href="#">#</a></li> </div> </ul> </li> <li><a href="#">#</a></li> </ul> </div> </div>
This creates the basis for a simple two-tiered menu of three items (the second of which will have two child items). The <div class="center"> is the tag mentioned at the beginning of this article that will break validation. However, it is necessary to center the list items with the rest of the site while still allowing the background to take up 100% width. This should become more obvious with the CSS:
#head {
width:100%;
background:#222;
height:36px;
}
#navigation, #navigation ul, .center {
margin:0px auto;
width:960px;
}
#navigation ul li {
float:left;
margin:0px 12px 0px 6px;
padding:18px 3px 0px 3px;
font-size:15px;
line-height:18px;
font-weight:bold;
text-transform:uppercase;
}
#navigation ul li a {
color:#FDFDFD;
}
#navigation ul li:hover, #navigation ul li:active {
background:#34B0F8;
color:#222;
}
#navigation li ul {
position:absolute;
left:-9999px;
}
#navigation li:hover ul {
left:0px;
width:100%;
padding-top:2px;
background:#34B0F8;
}
#navigation li ul li {
padding:0px;
margin:0px 9px;
}
#navigation li ul li a:active, #navigation li ul li a:hover, #navigation ul li a:active, #navigation ul li a:hover {
color:#222;
}
This should be relatively self-explanatory if you read the articles linked above. We’re simply styling a list as a menu, and when the mouse is hovered over an item with a child element that element is unhidden. The only problem we have here is that Internet Explorer won’t properly recognise the :hover class on any element other than <a>, so we’re going to need to borrow some JavaScript from the Son Of Suckerfish Dropdowns article:
sfHover = function() {
var sfEls = document.getElementById("navigation").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
What this does is look for <li> elements in navigation and then apply :sfhover to them when moused-over, and remove it when moused-out. So we’ll have to add the following to our CSS file for it to have a class to apply:
#navigation li:sfhover ul {
left:0px;
width:100%;
padding-top:2px;
background:#34B0F8;
}
Put all this together and you should have something that looks rather similar to our menu. Feel free to post any comments, suggestions or questions below.