Grow your CSS skills. Land your dream job.

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

Comments

  1. There is one more issue with your script. Im using FF3 beta 5, but this isnt a problem with the browser. Each menu stays open until you manually close it. There is a way to fix this, it involves a ” ! ” but i dont exactly remember.

  2. I never knew there was such a thing as : expression.

    How well supported is it?

  3. @Tyler: Yep, I had that in there as a Known Issue. As I learn more about jQuery I’m gonna fix that menu up to work a lot nicer that way.

    @David: It’s Microsoft-only. And it’s even a bit buggy there (hence the 1px offset in the code there). It’s just to make the min-max width thing work in IE 6.

  4. Max
    Permalink to comment#

    IE 6 is having a lot of trouble with the header. It’s also showing as a fixed width for some reason at 1260 mark it seems. Also this page is having problems in IE6 in the code examples.

  5. Nice user icon Chris ;)

  6. HA! That’s YOU!

  7. I like this – especially getting the text to align vertically however the issue with the menu only closing when click again is a bit of a worry…

    How about just get it to close when mouseover? I find that is less bugy than this.

  8. Christian Gorbach
    Permalink to comment#

    hi,
    nice. here’s a fix for the stay-open bug and – significant smaller js code.

    $(document).ready(function(){
    $(‘#zone-bar li em’).click(function() {
    $(‘#zone-bar>ul>li>ul’).hide();
    $(this).parents(‘li’).children(‘ul’).show();
    });
    });

    regards
    c)hristian

  9. Permalink to comment#

    Hi,

    nice tutorial, but my IE6 do not display that very well! FF is ok ;)

    Tobi

  10. This is almost what I’m looking for. I’m trying to do something in the style of how the digg login button works for my re-design of my band website (which you can see in it’s early stages here). I’m sure if I put the time and effort into it I could figure it out, but at the moment I don’t have the time.

  11. Thanks to Dean Edwards and his IE6 .js this header is o.k. with IE6

  12. Permalink to comment#

    I’m trying to do something in the style of how the digg login button works and this helped me a lot for my site ..have a nice day

  13. Permalink to comment#

    Good attempt but does not work correctly on FF3.01 and IE7. The alignment is off and there are several other issues, it looks crude.

  14. Permalink to comment#

    With IE 6 there was a crash. Why there was a crash, I don´t know. With Firefox 2 and 3, and Opera 9 ok.

  15. Permalink to comment#

    Seen the menu in the newest Firefox 3? The link backgrounds run through..

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".