This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, January 13, 2008

Digg-like navigation bar using CSS

Navigation bar with rounded corners an sliding doors technique for background images, Digg inspired.

This tutorial explains how to design a digg-like navigation bar using a liquid design with rounded corners for links.

The result is something like this:

Download this tutorial

Step 1: HTML page
Create a new HTML page and copy and paste the following code inside <body> tag:

<div id="topbar">
<a href="p1.html"><span>All</span></a>
<a href="p2.html" class="active"><span>News</span></a>
<a href="p3.html"><span>Video</span></a>
<a href="p4.html"><span>Images</span></a>
</div>
<div id="middlebar">
<a href="p1.html"><span>Technology</span></a>
<a href="p2.html"><span>World</span></a>
<a href="p3.html"><span>Science</span></a>
<a href="p4.html"><span>Gaming</span></a>
</div>

In the second link, "News", I added the class "active" (in bold). If you use URL variables and PHP to implement a dynamic navigation bar with some topics, if is defined an URL variable equal to "topic name" (in this case equal to "news") then add the attribute class="active" to the link. The code to implement this simple tip is very simple:

<?php if(isset($_GET['news'])){ echo 'class="active"';}?>


Step 2: rounded corners with liquid design for links
Before to start, I spend few rows to explain how to implement this simple effect using CSS. The typical way is using this simple structure:

...in HTML code:

<a href="mypage.html"><span>All</span></a>


Step 3: CSS file, #topbar
Create a new CSS file (style.css) and copy and paste the following code for #topbar element (remeber to link this file in your HTML page):

#topbar{
font-size:14px;
color:#3b5d14;
background:#b2d281;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}
#topbar a{
color:#3b5d14;
text-decoration:none;
margin:0 10px;
height:23px;
line-height:23px;
float:left;
display:block;
}
a.active{
height:23px;
line-height:23px;
background:url(pic/tb_a.png) right top no-repeat;
padding-right:10px;
}
a.active span{
background:url(pic/tb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}



Step 4: CSS file, #middlebar
In the same CSS file (style.css), add the following code:

#middlebar{
font-size:11px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
}

#middlebar a{
color:#3b5d14;
text-decoration:none;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url(pic/mb_a.png) right top no-repeat;
}
#middlebar a span{
background:url(pic/mb_span.png) left top no-repeat;
height:23px;
display:block;
padding-left:10px;
}

Save and test the result!

Download this tutorial

Related posts

blog comments powered by Disqus
Reinier said...

Nice one! Thx.

Anonymous said...

Thanks for writing this!

Piotr Zalewa said...

I believe it would be better if a tag will have the bigger "left round" image as the span background will cover the sharp edges.
It gives the ability to not use paddings - just add margin to the span.

Scott said...

Hey Antonio,

Good idea, but poor implementation. Anyone with an understnding of semantic XHTML and basic CSS navigation menus will agree that you should place your anchor tags within some type of list--normally an unordered list. This would also eliminate the need for the span within the anchor tag.

If anyone wants a better example of how to do this, just look at how they implemented it on Digg.

Antonio said...

Hi Scott, it's true.
The solution can be like this:

<ul>
<li><a href="mypage.html">All</a></li>
...
</ul>

...but in absolute terms don't change the result :)

Anonymous said...

I would have to agree with scott completely.

In addition it is also better practice not to name things by position ie; topbar, middlebar. main-nav, and secondary-nav might make a little more sense in this case. Also, a supplemental style sheet for IE6 should be provided if you are going to use png's for the menu, if you do not want to use any JavaScript or the like to achieve desired results.

Anonymous said...

That's the thing, I was looking for for!

Nice blog, too.

Hurry said...

Nice blog!

Paul Annett said...

This tutorial does the job, but as soon as you bump the text-size up a notch the navigation starts to spill out of each container. Digg makes this mistake too. A more bulletproof solution would need more unsemantic markup, but would result in the nav not 'breaking' on text-resize (personally I'm in favour of using unsemantic markup if it results in a not-broken experience for my users).

Anonymous said...

Thank you for sharing.

It works great in FireFox, but is it just me or does this not work in IE at all? I'm using IE6.

Carlo said...

Ciao Antonio,
ho provato ad utilizzare questo particolare tutorial, ma ho seri problemi di visualizzazione con IE 6.0 mentre con Firefox funziona tutto perfettamente... รจ normale?

fdds said...

really cool one
---------------
http://www.youyap.com

leon caddick said...

excellent!!!

Bali Publisher said...

Amazing..
for my as newbie I learn much more about this css. I was tried it for my joomla css website and working good.
many thank..thank

Kris said...

Thanks for the tutorial.

WebDevVote said...

Very nice to read the tutorial!

Suparna said...

Thank you for sharing this with us.
It is very easy to follow.

Anonymous said...

Aynone know of a way to do it like digg does, where it is a rolover?

Ludvig said...

Hello, I am a real noob at this, so I need a bit of help. In one of the steps in your tutorial you are writing "remember to link this in your html page" I have tried several times, but I cant get it, so I am just getting a VERY boring menu! So i wondered if you could explain how?

:D:D

Cheers

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News