|
By: olivier
Date: 2005-02-06
Time: 15:31
|
example : tabbed navbar with css2 and tbs (barre de navigation avec onglet)
Hello,
Here an example to illustrate CSS and TinyButStrong.
Hope that can help.
Olivier
php page : 'tab.php'
<?
$id = (isset($_REQUEST['id']) ? $_REQUEST['id'] : 'index');
include_once('tbs_class.php');
$TBS = new clsTinyButStrong;
$TBS->LoadTemplate('tab.html');
$blk_tab = array (
0 => array ('id' => 'index', 'label' => 'home', 'href' => '#'),
1 => array ('id' => 'id2', 'label' => 'tab label 2', 'href' => '#'),
2 => array ('id' => 'id3', 'label' => 'tab label 3', 'href' => '#'),
3 => array ('id' => 'id4', 'label' => 'tab label 4', 'href' => '#'),
4 => array ('id' => 'id5', 'label' => 'tab label 5', 'href' => '#'),
5 => array ('id' => 'id6', 'label' => 'tab label 6', 'href' => '#'),
);
$TBS->MergeBlock('blk_tab', 'array', $blk_tab);
$TBS->Show();
?>
|
html page : 'tab.html'
<html>
<head>
<title>tabbed navbar with css2 and tbs</title>
<style>
/* inspired from http://css.maxdesign.com.au/listamatic/horizontal05.htm */
#navtab
{
font: normal 12px Verdana, sans-serif;
width: 100%;
/*background-color: #FFFFCC;*/
padding-top: 1px;
/* padding: 1px 0px; */
border-collapse: collapse;
margin: 0px;
/* display: inline; */
}
#navtab ul
{
padding: 3px 0px;
margin: 0px;
border-bottom: 1px solid #778;
}
#navtab li
{
list-style: none;
margin: 0px;
display: inline;
}
#navtab li a
{
padding: 3px 4px; /* espace autour des liens */
margin-left: 5px; /* espace entre les liens */
border: 1px solid #778;
background: #DDE;
text-decoration: none;
}
#navtab li a:link { color: #448; }
#navtab li a:visited { color: #667; }
#navtab li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}
#navtab li a#current
{
background: white;
border-bottom: 1px solid white;
font: bold 12px Verdana, sans-serif;
}
</style>
</head>
<body>
<div id="navtab">
<ul><li><a href="[var..script_name]?id=[blk_tab.id;block=li]" [blk_tab.id;if [val]=[var.id];then 'id="current"']>[blk_tab.label]</a></li></ul>
</div>
</body>
</html>
|
|