A lot of my clients use menu with rounded corners in their websites and this menu items have rollover effect. So, the whole tab must be as a link.
I have solved this problem and suggest you the next code example.
At first let’s get ready all background images for our menu. We need 6 images:
Our next step, we will create CSS styles and Xhtml code:
1. This is a simple example of xhtml code. I added additional SPAN tags for left-side and right-side background images. I used class names menu_left and menu_right
1 2 3 4 5 | <ul id="menu"> <li><a href="#"><span class="menu_left"><span class="menu_right">Home</span></span></a></li> <li><a href="#"><span class="menu_left"><span class="menu_right">About</span></span></a></li> <li><a href="#"><span class="menu_left"><span class="menu_right">Ask Question</span></span></a></li> </ul> |
2. Onward we describe BODY tag and add all images for rollover effect as a background, because rollover image effect will appear faster and users will not see the blink.
1 2 3 4 5 6 7 8 9 10 | body{ /* srat Preloader for menu hovers */ background:url(bgr_menu_a_hover.gif) no-repeat; background:url(bgr_menu_left_hover.gif) no-repeat; background:url(bgr_menu_right_hover.gif) no-repeat; /* end Preloader for menu hovers */ background:#fff; padding:20px; margin:0; } |
3. At the end create all classes and IDs for our menu.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | #menu{ padding:0; margin:0; list-style:none; width:100%; overflow:hidden; } #menu li{ float:left; font-size:14px; font-family:Arial, Helvetica, sans-serif; color:#fff; padding:0 2px 0 2px; /* indent between menu items */ } #menu li a{ float:left; display:block; color:#fff; background:url(bgr_menu_a.gif) repeat-x; text-decoration:none; } #menu li a .menu_left{ float:left; display:block; background:url(bgr_menu_left.gif) no-repeat; } #menu li a .menu_right{ float:left; display:block; cursor:pointer; /* for IE6 */ text-align:center; padding:6px 15px 0 15px; height:21px; background:url(bgr_menu_right.gif) no-repeat right top; } #menu li a:hover{ background:url(bgr_menu_a_hover.gif) repeat-x; } #menu li a:hover .menu_left{ background:url(bgr_menu_left_hover.gif) no-repeat; } #menu li a:hover .menu_right{ background:url(bgr_menu_right_hover.gif) no-repeat right top; } |
That’s all! 
By the way, the height of my images is 27px. Check this part and be sure that your height and top padding are correct.
1 2 3 4 5 6 | #menu li a .menu_right{ ... padding:6px 15px 0 15px; height:21px; ... } |
Let’s do some math. Top padding equals 6px and height equals 21px accordingly 21 + 6 = 27 – is the height of image.
You could download an example here.
Hi.
One solution to the problem is to use the curvyCorners js library.
I’m just wondering if there is any particular reason why you don’t use curvycorners.
Cheers.
The main idea of this tutorial is coding rounded tabs without javascript. Yes, i agree with you that curvyCorners is a very good lib and a solution for round corners.
I think, CSS 3 will support rounded corners too.
Thanks
Actually curvycorners and corners are not useful in this context. Their ability to draw curved corners on hover states, especially on is limited. Images are the best solution at this time
Cool, but what if the corner graphics are made up with png/gif with transparency, in case the menu is on top of some background graphic.
Hola!
You can rewrite code like this:
<li><a href="#" ><span class="menu_left"></span><span class="menu_center">Home</span><span class="menu_right"></span></a></li>
Also, do not forget to add changes to CSS code.
P.S. If you need an example, please, send a comment here and I will create a post for PNG/GIF menus with transparent backgrounds.
Thanks, works like a charm.
I found this other approach:
http://www.vision.to/single-image-tabs-with-three-state-rollover.php
Best regards
Fine! I like your approach which you found. Easy and clear code.