|
|
|
|
|
|
| |
Here is an example how to control CSS Tab using php script...
PHPtabZ.php
| <?php
if (isset($_REQUEST['tab'])) {
$tab = $_REQUEST['tab'];
} else {
$tab = 0;
}
?>
<!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>Controling CSS Tabs Using PHP</title>
<style type="text/css">
/*Credits: Vijit Patil */
.tabZ{
padding: 3px 0;
margin-left: 0;
font: bold 12px Trebuchet MS ;
text-align: left;
border-bottom: 1px solid gray;
list-style-type: none;
}
.tabZ li{
display: inline;
margin: 0;
}
.tabZ li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #FDEAFD;
color: #2d2b2b;
}
.tabZ li a:visited{
color: #2d2b2b;
}
.tabZ li a:hover{
background-color: #FF8AFF;
color: black;
}
.tabZ li a:active{
color: black;
}
.tabZ li.selected a{/*selected tab*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #FF8AFF;
color: black;
}
</style>
</head>
<body><p> </p>
<?php
switch ($tab) {
case 1: //Manage User Tab1
?>
<ul class="tabZ">
<li><a href="PHPtabZ.php?tab=0">Tab1</a></li>
<li class="selected"><a href="PHPtabZ.php?tab=1">Tab 2</a></li>
<li><a href="PHPtabZ.php?tab=2">Tab 3</a></li>
</ul>
<?php
break;
case 2: // Manage User Tab2
?>
<ul class="tabZ">
<li><a href="PHPtabZ.php?tab=0">Tab1</a></li>
<li><a href="PHPtabZ.php?tab=1">Tab 2</a></li>
<li class="selected"><a href="PHPtabZ.php?tab=2">Tab 3</a></li>
</ul>
<?php
break;
default: // Manage User TabDefault
?>
<ul class="tabZ">
<li class="selected"><a href="PHPtabZ.php?tab=0">Tab1</a></li>
<li><a href="PHPtabZ.php?tab=1">Tab 2</a></li>
<li><a href="PHPtabZ.php?tab=2">Tab 3</a></li>
</ul>
<?php
break;
}
?>
</body>
</html> | |
These CSS menu tabs come with thick top/bottom padding to achieve that attractive cushioned look. Setup is very easy- each menu link simply carries a gradient background image that is changed to a darker version of the original when the mouse rolls over each menu item.
| <!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> CSS Navigation Menu </title>
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}
img {
border: none;
}
/*- Menu Tabs--------------------------- */
#TaBZ {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#TaBZ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#TaBZ li {
display:inline;
margin:0;
padding:0;
}
#TaBZ a {
float:left;
background:url("tableft6.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#TaBZ a span {
float:left;
display:block;
background:url("tabright6.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#TaBZ a span {float:none;}
/* End IE5-Mac hack */
#TaBZ a:hover span {
color:#FFF;
}
#TaBZ a:hover {
background-position:0% -42px;
}
#TaBZ a:hover span {
background-position:100% -42px;
}
#TaBZ #current a {
background-position:0% -42px;
}
#TaBZ #current a span {
background-position:100% -42px;
}
-->
</style>
</head>
<body>
<div id="TaBZ">
<ul>
<!-- CSS Tabs -->
<li><a href="Home.html"><span>Home</span></a></li>
<li><a href="Products.html"><span>Products</span></a></li>
<li id="current"><a href="Services.html"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>
</ul>
</div>
<br /><br />
</body>
</html> | |
|
|
| XDT Topsite (Gold v1.0)
Categories : Databases, CSS, PHP, HTML and PHP, Sessions | | | Dynamic CSS generation for multiple website colouring schemes.
Categories : PHP, CSS, HTML and PHP | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | PHP alternating the colors of table rows with style.
Categories : PHP, HTML and PHP, CSS | | | CSS Vertical Navigator , With Coll CSS Look
Categories : CSS, Web Design, Beginner Guides | | | Kewl Date Example
Categories : PHP, HTML and PHP, Date Time, CSS, Beginner Guides | | | Date layout using CSS
Categories : CSS, Date Time, Web Design | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | | | day and week grid with clickable fields on/off and possibility to insert in DB
Categories : PHP, Java Script, CSS | | | Change the background color of a website daily dynamically using the php date function to get the current day of the week and depending on that day, set the background color for the web page.
Categories : PHP, Date Time, Beginner Guides, Web Design | | | Simple PHP control CSS Calender
Categories : PHP, HTML and PHP, Calendar, Date Time, CSS | | | List the content of the directory of your webserver where this small PHP Script resides.
Categories : PHP, Filesystem, Directories, CSS | | | Query2Report : Generating Html, Pdf and Csv Reports from SQL Query
Categories : PHP, PHP, HTML, PDF, Excel | | | CSS style switcher
Categories : PHP, CSS, HTML and PHP, Arrays, Sessions | |
|
|
|
