Categories > Your tips & tricks >

example : tabbed navbar with css2 and tbs (barre de navigation avec onglet)

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
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>
By: PhilE
Date: 2005-05-22
Time: 15:58

Re: example : tabbed navbar with css2 and tbs (barre de navigation avec onglet)

example works great. Just a suggestion though. removing bold from the:

#navtab li a#current

style keeps the tabs still when swapping. Bold has a slightly larger footprint which causes the tabs to change alignment slightly.

PhilE