HTML/CSS


Round Corner, Full Rollover Tabs using PHP and CSS
By Richard Clark
18-Jul-09
Views: 22999

The basic idea behind these tabs is taken from http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml. Taking it to the next level i have added an option to select a tab (i.e clicking a tab selects it) and also added some code to make them work with php.
 
How to create tabs? (Page 1 of 1)

To create round corner tabs, each tab will be created using two image slices and the center will be filled with background color. The problem in creating tabs like this is to change both background images on a mouse rollover. To change both left and right image slices we need an additional tag (a span tag in this article).

The following markup will be used to create a tab single tab

<li><a href="#"><span>Home</span></a></li>

Left corner of tab
Right corner of tab
Left corner of selected tab
Right corner of selected tab

Left round corner image of each tab will be placed in the background of <a> tag, while the right corner image will be placed in the background of <span> tag. The tabs created in this way have the following features

  • The whole tab is clickable and has a rollover effect
  • Tabs are not fixed in size, stretch to accomodate the text they contain
  • No javascript, pure css tabs
  • Easy to implement in php

The code is given below

Download Code
Online Demo

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Round Tabs With PHP</title>

<style>
#tabs{
	padding-right:20px;	/* The right most tab will be padded 20px from its right */
	margin:0px;
	float:right;		/* For right aligned tabs */
}
#tabs a{
	background:#000 url(images/left_tab.gif) top left no-repeat;	/* Background image is positioned top, left */
	color:#FFF;
	padding-left:5px;	/* Change this padding according to the size of image slices used to create tab */
	text-decoration:none;
}
#tabs a:hover{
	background:#edcb27 url(images/selected_left_tab.gif) top left no-repeat;
	color:#000;
	text-decoration:none;
}
#tabs a span{
	background:#000 url(images/right_tab.gif) top right no-repeat;	/* Note the position of background image */
	color:#FFF;
	padding-right:15px;
}
#tabs a:hover span{
	background:#edcb27 url(images/selected_right_tab.gif) top right no-repeat;
	color:#000;
}
#tabs li{
	list-style:none;
	float:left;
	padding-left:3px;
}
#tabs b{	/* This class will be applied on selected tab */
	background:#edcb27 url(images/selected_left_tab.gif) top left no-repeat;
	color:#FFF;
	padding-left:5px;	
	font-weight:normal;
}
#tabs b span{
	background:#edcb27 url(images/selected_right_tab.gif) top right no-repeat;
	color:#000;
	padding-right:15px;	
}
#tabs span{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:6px;
	cursor:pointer;
}
#tabs a,#tabs a span,#tabs b,#tabs b span{
	display:block;		/* Set display to block, otherwise background images will not work*/
	float:left;
}
</style>

</head>

<body>
<?php
	$tab=$_REQUEST['tab'];
	if($tab=='') $tab='home';
 ?>
	<ul id="tabs">
    	
		<?php if($tab=='home'){ ?>
		<li><b><span>Home</span></b></li>
        <? }else{ ?>
		<li><a href="?tab=home"><span>Home</span></a></li>
        <? } ?>

		<?php if($tab=='products'){ ?>
		<li><b><span>Products</span></b></li>
        <? }else{ ?>
		<li><a href="?tab=products"><span>Products</span></a></li>
        <? } ?>

		<?php if($tab=='services'){ ?>
		<li><b><span>Services</span></b></li>
        <? }else{ ?>
		<li><a href="?tab=services"><span>Services</span></a></li>
        <? } ?>

		<?php if($tab=='downloads'){ ?>
		<li><b><span>Downloads</span></b></li>
        <? }else{ ?>
		<li><a href="?tab=downloads"><span>Downloads</span></a></li>
        <? } ?>

	</ul>
<div style="clear:both; background-color:#edcb27; height:0px; overflow:hidden;"></div>    
    <div style="border:solid 3px #edcb27; background-color:#edcb27; padding:10px; font-family:Verdana, Geneva, sans-serif; font-size:11px;;">
Paint is a drawing tool you can use to create simple or elaborate drawings. These drawings can be either black-and-white or color, and can be saved as bitmap files. You can print your drawing, use it for your desktop background, or paste it into another document. You can even use Paint to view and edit scanned photos. 

You can also use Paint to work with pictures, such as .jpg, .gif, or .bmp files. You can paste a Paint picture into another document you've created, or use it as your desktop background.
    	
    </div>
</body>
</html>

This tutorial is about creating a multi-level tree from the values stored in the database. This tutorial has 2 parts, first i will discuss how to store hierarchical data in a single table and the second part will teach you create a tree from database values using JavaScript. . Read More Tree in PHP

Comments
Vinsent
[19-Aug-2009]
#1

This looks really good..will try it out

php rounded corners
[09-Mar-2010]
#2

its so coool, thanks!!!!

Henrik
[12-May-2010]
#3

Hi, thanks for this nice code,

How do I change the text in the tab area (not the tab-text itself) depending on chosen tab?

//Henrik

F0l2saken
[05-Oct-2010]
#4

You have failed to provide instructions on both pages for changing the text on each tab.  The demo is useless, you have the exact same text showing on every page, what is the purpose of tabs if the text is the same on each tab?  Completely useless

Richard
[05-Oct-2010]
#5

@Henrik, you can do this in the following way

<div style="clear:both; background-color:#edcb27; height:0px; overflow:hidden;;"></div>
    <div style="border:solid 3px #edcb27; background-color:#edcb27; padding:10px; font-family:Verdana, Geneva, sans-serif; font-size:11px;;;">
    <? if($tab=='home'){ ?>
    	The text for home tab goes here ..........
	<? } else if($tab=='products'){ ?>
    	The text for products tab goes here ...
    <? } else if($tab=='services') { ?>
    	The text for services tab goes here ...
    <? } else if($tab=='downloads') { ?>
    	The text for downloads tab goes here ...
	<? } ?>
</div>

hanif
[15-Mar-2011]
#6

This is awesome, man!!...thanks for sharing this knowledge...erm..just one question, can we change the color of background based on the clicked tab?...just curious...thanks...

Kulk Moza
[14-Nov-2011]
#7

Yes you can change the color of the background. You have to change colors in the css part and edit the images with an image editor.  

Newbie
[16-Dec-2011]
#8

hi, i tried the code but its giving me the following error:

 

Parse error: syntax error, unexpected $end in C:xampphtdocsoaastabsindex.php on line 104

 

what could be the problem? Please help.

Thank you in advance


Sujata
[19-Jan-2013]
#9

WOW this is it the Holy Grail of php, image, no js, color change EVERYTHING TABS! I can not even begin to say how amazingly thankful I am to you, (BECAUSE NOW, MOST OF ALL, I CAN  SET MY TAB FILE AS AN PHP 'INCLUDE' FILE AND NOT LOSE A SINGLE COLOR CHANGE!) I have even looked for your name on the web to thank you more directly, but I can imagine that you are well awhere of how many Richard Clark's there are in the world! Would you please contact me so I may thank you directly? I was so amazed that I had to keep checking the code before I could believe that it can do all this, it is exactly what I need!

narendra panwar
[18-Mar-2013]
#10

hi, i tried the code but its giving me error

Parse error: parse error in C:wampwwwginniTravelindex.php on line 103

Subba
[03-Apr-2013]
#11

I got the same error as you got, I clicked the online demo and then took it's source, then it worked, may be some mistake is there in the code in the box

Posting comments has been disabled temporarily