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 tutorialStep 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;
}
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;
}
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;
}
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;
}
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 tutorialRelated posts
I am 
Nice one! Thx.
Thanks for writing this!
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.
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.
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 :)
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.
That's the thing, I was looking for for!
Nice blog, too.
Nice blog!
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).
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.
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?
really cool one
---------------
http://www.youyap.com
excellent!!!
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
Thanks for the tutorial.
Very nice to read the tutorial!
Thank you for sharing this with us.
It is very easy to follow.
Aynone know of a way to do it like digg does, where it is a rolover?
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