ASP Code, CSS Code, PHP Code

CSS Tabs With a Bit of JavaScript

This CSS2 code will enable you to display the separate pages of your application in an intuitive tabbed interface. I use JavaScript to create the linked buttons, and an array of links to display the tabs. This code snippet also provides both the ASP and the PHP code to process the array and output the tabs properly. The code picks up the URl of the current page, which allows you to see which page/tab is active.

These tabs and code have been tested and verified to work with all current browsers; including FireFox, IE, and Opera.

Here's the CSS to determine what the tabs will look like:


#navtabs {
     font-family: verdana;
     height: 30px; vertical-align: middle;
     padding: 0px 0px 0px 15px; 
     margin: 0px; width: 100%;
     border-color: #333333; 
     border-style: solid; 
     border-width: 0px 0px 2px 0px;
}

.tabon, .taboff {
     height: 29px; 
     vertical-align: middle;
     line-height:29px;
     float:left; 
     overflow: hidden;
     cursor: pointer; 
     cursor: hand;
     font-size: 11px;
     padding: 0px 2px 0px 2px; 
     margin: 0px 2px 0px 0px;
     border-color: #333333; 
     border-style: solid; 
     border-width: 1px 1px 0px 1px;
}

.taboff {
     color: #000000;
     background: #FF0000;
}

.tabon {
     font-weight: bold;
     position: relative;
     top: 1px;
     background: #ffffff;
     border-width: 2px 2px 0px 2px;
}

* html .tabon {top:2px}

Here's the code in ASP to store the array of links, process it, and output it while determining which page is active. It does this by retrieving the URL of the current page, and comparing it to the links in the array.


<div id="navTabs">
<%

dim arTabs( 5 )
arTabs( 0 ) = "home"
arTabs( 1 ) = "events"
arTabs( 2 ) = "news"
arTabs( 3 ) = "photos"
arTabs( 4 ) = "users"
arTabs( 5 ) = "admin"

dim theClass, thisPage

thisPage = Request.ServerVariables("SCRIPT_NAME")
thisPage = replace( right( thisPage, len( thisPage ) - inStrRev( thisPage, "/" ) ), ".asp", "" )

for i = 0 to uBound( arTabs)
     if thisPage = arTabs(i) or left( thisPage, len( arTabs(i) ) ) = arTabs(i) then
          theClass = "on"
      else
          theClass = "off"
     end if

     Response.Write("<div class=""tab" & theClass & """ onclick=""javascript:window.location='" & arTabs(i) & ".asp'"">")
     Response.Write("<img src=""" & arTabs(i) & ".gif"" align=""absmiddle"" />&nbsp;")
     Response.Write( replace( arTabs(i), "_", " " ) & "</div>" & vbCrLf )
next
%>
</div>

And here's the same ASP code converted to PHP:


<div id="navTabs">

<?php
     
$arTabs&#91;&#93; = array();
$arTabs&#91;0&#93; = "home";
$arTabs&#91;1&#93; = "events";
$arTabs&#91;2&#93; = "news";
$arTabs&#91;3&#93; = "photos";
$arTabs&#91;4&#93; = "users";
$arTabs&#91;5&#93; = "admin";

$thisPage = basename($_SERVER&#91;PHP_SELF&#93;,".php");

for ($i = 0; $i < count($arTabs); $i++) {
    $text = str_replace("_", " ", $arTabs&#91;$i&#93;);
if ($thisPage == $arTabs&#91;$i&#93;) {
     $theClass = "on";
} else {
     $theClass = "off";
}

echo '<div class="tab' . $theClass . '" onclick="javascript:window.location=\'' . $arTabs&#91;$i&#93; . '.php\'">';
echo '<img src="' . $arTabs&#91;$i&#93; . '.gif" align="absmiddle">&nbsp;' . $text . '</div>';
}
?>
Share

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image