Rounded corner navigation bar without images using CSS and jQuery

. Friday, June 13, 2008
  • Agregar a Technorati
  • Agregar a Del.icio.us
  • Agregar a DiggIt!
  • Agregar a Yahoo!
  • Agregar a Google
  • Agregar a Meneame
  • Agregar a Furl
  • Agregar a Reddit
  • Agregar a Magnolia
  • Agregar a Blinklist
  • Agregar a Blogmarks

In this tutorial, we will create a navigation bar with rounded corners (without any image) using css and jQuery (a javascript library). If you dont have any experience with jQuery yet, I would recommend you to read these two tutorials first:
Change div content with jQuery
Toggle div element using jQuery

Requirements
jQuery library: Download here (packed version is 30kb)
jQuery Corner plugin: Download here (8kb).

This is what we will have at the end of this tutorial


Include jQuery library and the jQuery.corner plugin

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

jQuery code
This is the important part of this tutorial. Apply corner() function on your desired element to make its corners rounded.
<script type="text/javascript">
$(document).ready(
function() {
$(
"#nav ul").corner("8px");
});
</script>

CSS (you can change the colour values yourself)
#nav {
width
: auto;
}
#nav ul, #nav ul li
{
list-style
: none;
margin
: 0;
padding
: 0;
float
: left;
}
#nav li
{
background-color
: #e9e9e9;
}
#nav li a
{
display
: block;
text-decoration
: none;
font-weight
: bold;
color
: #919191;
padding
: 10px;
}
#nav li a:hover
{
text-decoration
: underline;
}
#nav .active
{
text-decoration
: underline;
}

HTML code
Finally, its time for an unordered list (ul tag) of your menu
<div id="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feed</a></li>
</ul>
</div>

6 comments:

Anonymous said...

you made it so easy for me dude! god bless :D

Serdar said...

thanks for your time for this article

it is very nice to find something about jquery via google

----

i copy and paste your code in an aspx file

it is not rounding...

what might i miss?

can you show this article on a working demo file

Fahad Ibnay Heylaal said...

you need to link to both jquery.js and jquery.corner.js file.

jquery.js - it is the library

jquery.corner.js - the plugin

the plugin will utilize the library to create rounded corners.

Pierre-Jean said...

Hey,

Thanks for the plug...

I notice that it doesn't work on ie and ff BUT great with Chrome...

Is something wrong in my code ?

I use a special class to call the function and then i skin my cornered divs directly in html with style="..."

Maybe a url would be more releavant :

http://www.trenditude.fr/spip.php?page=sommaire-3

I'm sorry to annoy you, but i've got to far to let it down !

thanks again.

seroquel said...

Thank you for this HTM code tutorial.

tom said...

Hi - I used the latest version of jquery.corner.js available via link here: http://jquery.malsup.com/corner/
For this demo, I could not get the ul to style at all. I switch it to $('li.first').corner(); and got the desired results.