ThemBid.com

Dynamic CSS Tabs in Symfony

We are introducing a tabbed menu interface for ThemBid.com and following are the requirements and the step by step instructions used to make it happen. Although I hacked this in Symfony, it is easy to use any PHP framework.

Here are the parameters:

• Easily be able to change the colors easily
• Allow for sub-navigation
• Use plain text for the titles of the tab
• Use a different background and text color for the active tab
• Pre-load the rollovers
• The menu should be semantically correct (i.e. in a html list format with all design in the CSS)
• No Javascript necessary
• Degrade gracefully
• No more than three graphics files needed
• Re-usable

First, I will show the final product (six tabs) and give you the necessary images so that you can try it out. Secondly, I will show you how to automatically generate the menu and choose the selected tab in PHP within the Symfony framework. This solution is based on the Sliding Door technique with dynamic width and a rollover effect.

The HTML

The first step is to define what the menu links will be in the view. The final generated HTML is as follows:

Home
Requests
Post Request
Directory
Specials
Classifieds



  

The CSS

#navigation_tabs
{
  padding: 0px;
  margin: 0px;
  height: 76px;
  width: 827px;
}
#tab_container
{
  padding: 0px;
  margin: 0px;
  height: 37px;
}
/* This is for the sub-navigation */
.menu_bg
{
  padding: 0px;
  padding-bottom: 6px;
  margin: 0px;
  height: 24px;
  width: 827px;
  background: url("/images/navigation_menu_bg.png") 0 0 no-repeat;
}
#tabs{
  float: left;
  width: 100%;
  font-size: 93%;
  line-height: normal;
}
#tabs ul{
  margin: 0;
  padding: 10px 10px 0;
  list-style: none;
}
#tabs li{
  display:inline;
  margin:0;
  padding:0;
}
#tabs a{
  float:left;
  background:url(/images/button_top_left.png) no-repeat left top;
  margin:0;
  width:.1em;
  margin-left: 8px;
  padding:0 0 0 8px;
  text-decoration:none;
}
#tabs a span {
  float:left;
  display:block;
  background:url(/images/button_top_right.png) no-repeat right top;
  padding:7px 15px 4px 6px;
  font-weight:bold;
  /* Color of the text for inactive tabs */
  color: #505050;
}
/* Commented Backslash Hack
    hides rule from IE5-Mac \*/
#tabs a span {
  float:none;
  text-decoration: none;
}
/* End IE5-Mac hack */
#tabs > ul a {
  width:auto;
}
#tabs a:hover span {
  color: white;
}
#tabs a:link {
  text-decoration: none;
}
#tabs a:hover {
  background-position:0% -28px;
  text-decoration: none;
}
#tabs a:hover span {
  background-position:100% -28px;
  text-decoration: none;
}
#tabs #selected_tab a{
  background:url(/images/button_top_left.png) no-repeat left top;
  background-position:0% -28px;
}
#tabs #selected_tab a span {
  background:url(/images/button_top_right.png) no-repeat right top;
  background-position:100% -28px;
  color: #FFFFFF;
}

public static function getMenuTabs( $location )
{
  $menu = "
\n";
  // Main Tab Navigation
  // The key is the name you want to appear in the tab and the value is the link
  $tab_array = array(
    'Home' => 'homepage',
    'Requests' => 'requests',
    'Post Request' => 'postrequest',
    'Directory' => 'business',
    'Specials' => 'specials',
    'Classifieds' => 'classifieds'
  );
  //This array allows us to know what page we are on and highlight the appropriate tab
  switch ( $location )
  {
    case 'home':
      $params = array( 'Home' => "id="selected_tab"" );
      break;
    case 'requests':
      $params = array( 'Requests' => "id="selected_tab"" );
      break;
    case 'postrequests':
      $params = array( 'Post Request' => "id="selected_tab"" );
      break;
    case 'directory':
      $params = array( 'Directory' => "id="selected_tab"" );
      break;
    case 'specials':
      $params = array( 'Specials' => "id="selected_tab"" );
      break;
    case 'classifieds':
      $params = array( 'Classifieds' => "id="selected_tab"" );
      break;
  }
  // This function is what actually creates the HTML code for the tabs
  $menu .= myView::create_button($tab_array, $params, 'tab_container' );
  // Sub Tab Navigation
  $menu .= "


\n";
  $menu .= "

\n";
  echo $menu;
}

//$links is an array whose key is the text that you want the button to display and the value is the URL
//$params is an array that allows for additional parameters such as javascript and class or id definitions. \
//  The key must be the same as its corresponding $links key
// $container defines the id for the div that holds all the tabs
public static function create_button( $links, $params="", $container="" )
{
  $button = "
\n";
  $button .= "
\n
\n";
  foreach( $links as $key => $value ){
    if( !$params )
    {
      $button .= "
".link_to("$key", "$value")."

\n";
    }
    else
    {
      if( isset($params[$key]) )
      {
        $p = $params[$key];
      }
      else
      {
        $p = "";
      }
      $button .= "
".link_to("$key", "$value")."

\n";
    }
  }
  $button .= "

\n

\n

\n";
  return $button;
}