Rounded corner CSS navigation bar with jQuery

Posted by Fahad Ibnay Heylaal on Sep 23rd 2008, 16:01 - in CSS

In one of my early posts, I have explained how to turn your unordered list into a horizontal navigation bar with css. Now, I will show you how to add some nice round corner effect to your anchor elements with jQuery. And yes, we will be doing this without using any image.

Preview

rounded-corner-navigation-bar-using-jquery

Requirements

jquery.js : the jQuery library
jquery.corner.js : jQuery corner plugin

The HTML

Yes, its an unordered list. The first anchor element has a class attribute selected.

  1.  
  2. <div id="nav">
  3.   <ul>
  4.     <li><a href="#" class="selected">Home</a></li>
  5.     <li><a href="#">Blog</a></li>
  6.     <li><a href="#">About</a></li>
  7.     <li><a href="#">Contact</a></li>
  8.   </ul>
  9. </div>

The CSS

If you have already read my post on horizontal navigation bar, I dont think the css below needs much explanation. But notice the css for hover effect.

  1. #nav ul {
  2.   margin: 0px;
  3.   padding: 0px;
  4.   list-style: none;
  5. }
  6.  
  7. #nav ul li {
  8.   background-color: #990000;
  9. }
  10.  
  11. #nav ul li,
  12. #nav ul li a {
  13.   float: left;
  14.   display: block;
  15. }
  16.  
  17. #nav ul li a {
  18.   margin: 15px;
  19.   padding: 5px;
  20.   font-size: 24px;
  21.   color: #fff;
  22.   text-decoration: none;
  23. }

We want the same effect for selected and hovered anchor elements

  1. #nav ul li a:hover,
  2. #nav ul li a.selected {
  3.   background-color: #fff;
  4.   color: #272727;
  5. }

The JavaScript (jQuery)

There is not much javascript to it at all. Just add the two javascript files mentioned above, and add three more lines of code.

  1. <script type="text/javascript" src="jquery.pack.js"></script>
  2. <script type="text/javascript" src="jquery.corner.js"></script>
  3. <script type="text/javascript">
  4.   $(document).ready(function() {
  5.     $("#nav ul li a").corner();
  6.   });
  7. </script>

Done! You really dont need to do anything more. Have fun.

Share: