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>
Creating a multi level (unlimited levels) drop down menu from data stored in the database. . Read More PHP Multi Level Menu
Vinsent