PHP


Dynamically Creating Tabs in PHP
By Andrew R
20-Jul-08
Views: 51065

In this tutorial you will learn how to create simple tabs in PHP. The code dynamically creates tabs from a PHP array. Click Here to view a demo

For improved version of php tabs please click :PHP Tabs

 
Dynamically Creating Tabs in PHP (Page 1 of 1)

The first step in creating a tabbed application is to design the tabs in an image editing application like Adobe Photoshop or any other application of your choice. A sample of the tabs we are going to create in this tutorial is shown below. I have created those tabs in Adobe Photoshop

The next step is to clip the corners of those tabs. Four images will be required, the two corners (left and right) of selected tab and two corners (left and right) of the normal tab. Center of the tab can be filled with color.

But in this example I have used glossy effect on the tabs so the center of the tab cannot be filled with color. A slice will be required for the middle as well, so a total of the following six images will be used in the tabbed interface

Left corner of selected tab
Image to be repeated in the center of selected tab
Right corner of selected tab
Left corner of normal tab
Image to be repeated in the center of normal tab
Right corner of normal tab

Below is the complete PHP code to create tabs.

<!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=iso-8859-1" />

<title>Using Tabs With PHP</title>
<style>
.link{
  font-family:tahoma;
  font-size:11px;
  font-weight:bold;

  color:white;
  text-decoration:none;
}
</style>
</head>
 
<body>
<?
  $id=$_REQUEST['id'];
 
  $links=array();

 
  $links[]="Home";
  $links[]="Services";
  $links[]="Products";

  $links[]="Downloads";
  $links[]="Contact Us";
 
  $total_links=count($links);

?>
  <table cellpadding="0px" cellspacing="0">

    <tr>
      <td width="30px">&nbsp;</td>
<?
	for($i=0;$i<$total_links;$i++){ 
	  if($i+1==$id){
?>
      <td style="padding-left:3px">

  <table cellpadding="0" cellspacing="0">
    <tr height="28px">

      <td width="15px"><img src="images/selected-left.gif" /></td>
      <td style="background-image:url(images/selected.gif);" class="link"><?=$links[$i]?></td>

      <td width="15px"><img src="images/selected-right.gif" /></td>
    </tr>

  </table>
      </td>
      <? } else { ?>
      <td style="padding-left:3px">
  <table cellpadding="0" cellspacing="0">

    <tr height="28px">
      <td width="13px"><img src="images/tab-left.gif" /></td>

      <td style="background-image:url(images/tab.gif);"><a href="?id=<?=$i+1?>" class="link"><?=$links[$i]?></a></td>

      <td width="13px"><img src="images/tab-right.gif" /></td>
    </tr>

  </table>
      </td>
      <? } // else end
 
      }  //for end
    ?>
      <td width="30px">&nbsp;</td>
    </tr>

    <tr>
      <td colspan="<?=$total_links+2?>" bgcolor="#1895D5">&nbsp;</td>
    </tr>

    <tr>
      <td colspan="<?=$total_links+2?>" style="border:1px #1895D5 solid;">
        <h1 style="color:#1895D5">The text for linkid<?=$id?> goes here ...</h1>

      </td>
    </tr>
  </table>
</body>
</html>
 

Using this search and replace technique, you can convert/replace short tags with normal php tags . Read More Convert PHP Short Tags

Comments
motan
[05-Sep-2008]
#1

hello nice and simple code but if you code explain the code how does it work that will be great and if possible how do you add a form to generate the tabs

Alex
[16-Aug-2008]
#2

Your blog is interesting! Keep up the good work!

selvaas
[06-Sep-2008]
#3

this dynamical form is a gud na

Bala
[26-Sep-2008]
#4

Good one.thanks ma

renjinijr
[26-Sep-2008]
#5

good work

Gore
[26-Sep-2008]
#6

it's so flexible , good look ,well work Thanks to Andrew R

James Moralde
[06-Oct-2009]
#7

Most tabs I commonly see are clickable anywhere within the tab. Your code here requires one to click on the text on the tab only. Anyway, it is cool enough to be able to create stylish tabs like this. Thanks.

Webmaster
[06-Oct-2009]
#8

James here is the version with full clickable tabs http://www.qualitycodes.com/tutorial.php?articleid=27

king kane
[26-Mar-2010]
#9

how do i alter the code to direct the different pages to their different .php files that i have. I mean the syntax along the the line:

if(id == array[1]){

include('Homepage');

}

or something like that. Please help thanks!

Matt
[23-Jun-2010]
#10

Is it possible to use this great script without the ID's in the navigation but the menu names ?

 

I'm trying to figure it out, but can't fix it that fast.

 

Thanks,

 

Matt

dusko
[27-Jul-2010]
#11

Good php code. Thank you for sharing this code with everyone.

php custum developer
[04-Jan-2011]
#12

Guys you done a great job... i got your point of explanation...

Thank you guys!!!

Κατ&#
[10-Feb-2011]
#13

That was what i needed. Thanks :)

Bashir Ahmed
[15-Sep-2012]
#14

Thanks

ruben
[14-Jan-2013]
#15

The problem is that php tell me that there is a issue.

Undefined index: id ??

Any answer?

Posting comments has been disabled temporarily