Designing the Digg Header: How To & Download

Published by Chris Coyier

digg-header.png

The design of Digg is full of smart ideas. The site identity is strong but doesn't take up too much valuable vertical space. Navigation is compacted with the use of simple drop-down menus. Important things like subscribing, searching and account information are right up top where you would expect them to be. It's fluid width, but it doesn't shrink too far or grow too big.

Let's design the Digg header!

VIEW THE DEMODOWNLOAD FILES

digg-header-css.png

 

1. The Page Wrap (fluid width with smarts)

We know that fluid width can be bad news if your page is allow to grow too big or shrink too small. We can prevent that by setting min and max widths and then use an "expression" for browsers that don't do max/min widths (IE).

#page-wrap {
	min-width: 960px; max-width: 1260px;
	margin: 0 auto; padding: 0 10px;
	width:expression(document.body.clientWidth < 961? "960px" : document.body.clientWidth > 1261? "1260px" : "auto");
}

 

2. Top Right Profile Information

The logo image will by default be left-aligned, but we'll need to float all that content on the right.

#right-side {
	float: right;
	padding-top: 15px;
	}
	#right-side img {
		border: 1px solid white;
		vertical-align: middle;
	}

Notice the code for the img tag in the right content. We give the user icon a bit of a white border and set it's vertical alignment to "middle". This keeps the text to the right of it nice and centered without having to use a table or top padding (neither is ideal).

vertical-align.png

 

3. Top Right Search Area

form#main-search {
	display: inline;
	position: relative;
	padding-right: 10px;
	}
	form#main-search label {
		display: none;
	}
	#search-button {
		position: absolute;
		right: 0px;
		top: -6px;
	}

We needed to set the form area to an inline element so that it didn't break down onto the next line like a block element would. It is good form to include a label element with all input forms, but since the design doesn't necessitate an actual text label, we can just hide it with display: none;. Using a little absolute positioning, we can drop that magnifying glass button image on the right of the search form.

 

4. Sliding Doors Rollovers

To make the menu area as extensible as possible, it needs to be regular web text. But the lovely rollover effect we want requires images. Since web text can grow, but images cannot, we need to compensate for this by using what is known as the sliding doors technique.

leftandright.png

This is a fairly common technique, but what is unique in this situation is that both sides of this sliding door need to be applied as a rollover state. We'll need to apply those background images separately like this:

#zone-bar ul li:hover {
	background: url(images/zonebar-navleft.png) center left no-repeat;
}
#zone-bar ul li a:hover {
	background: url(images/zonebar-navright.png) center right no-repeat;
}

Since some browsers (IE again) do not support rollover pseudo-classes on page elements other than anchor links, it is a good thing the "navright" graphic is the short one, which should look just fine all by itself.

 

5. The Dropdowns (a.k.a Amateur jQuery Night)

This is what the code for a single menu item looks like:

<li>
	<a href="#"><span>
		Science &nbsp;
		<em class="opener-science">
			<img src="images/zonebar-downarrow.png" alt="dropdown" />
		</em>
	</span></a>
	<ul class="sciencesublist">
		<li><a href="#">Enviornment</a></li>
		<li><a href="#">General Sciences</a></li>
		<li><a href="#">Space</a></li>
	</ul>
</li>

That unordered list at the bottom is the dropdown part. We will use some absolute positioning to push it down below the bar and then hide it by default with display: none;.

#zone-bar ul li ul {
	display: none;
	position: absolute;
	top: 29px;
	left: 0px;
	width: 150px;
	border: 1px solid #ccc;
	background: white;
	padding: 10px 0 0 0;
}

Couple things of note here. When using absolute positioning, some browsers really like to see both a vertical value (top or bottom) and a horizontal value (left or right). Even though the default should be left: 0, it's good to just put it in there. Make sure to set a background color for this menu, so when it lays on top of content you won't see the content behind the menu.

Of particular note is the em tag in the markup. This is the extra hook I used to target with jQuery in order to open up our menus.

$(document).ready(function(){
	$(".opener-technology").click(function(){
		$(".technologysublist").toggle();
	});
});

The "toggle" function in jQuery automatically switches between display: none; and display: block;. This does the trick, but this is a very amateur way to handle this. In retrospect, I probably should just apply a class to the image of the arrow itself and use that. I KNOW there are way smarter ways of handling this too. The dumb way I did it needs a unique class for every single opener arrow and submenu. I'm just learning here, so don't give me too much grief =)

KNOWN ISSUES:

  • Opera is collapsing the size of the main menu list item when you open the dropdown. Is there a problem with my jQuery?
  • Menus stay open until closed. Would be nice if the menus would close when another menu is opened. Maybe slide up and fade away?

VIEW THE DEMODOWNLOAD FILES