Creating Tabs with HTML and CSS

Tabs are a fun way to organize and display information on a web page. Tabs can be easily created and styled using just HTML and CSS.

In this Tutorial...
  • HTML - You will use basic HTML
  • CSS - You will use CSS to style the tabs
  • PHP - You will use php to keep track of which tab content to display.
Before you begin...

Create a php page and save it as: tabs.php

Creating the Links in a List

To create the tabs using HTML, we are going to put the links in an un-ordered list. We will put the address of the links to our current page.

<ul>
    <li><a href='tabs.php'>Link 1</a></li>
    <li><a href='tabs.php'>Link 2</a></li>
    <li><a href='tabs.php'>Link 3</a></li>
    <li><a href='tabs.php'>Link 4</a></li>
</ul>

Now we need to create a class in CSS to style the list as tabs.

3 Ways to Style
  • INTERNAL - Between the <head> and </head> tags of an HTML page
  • EXTERNAL - Linked to the HTML page with: <link rel="stylesheet" type="text/css" href="style.css">
  • INLINE - Applied directly to an HTML tag in the page

This tutorial will use an internal style as an example because we are only applying a style to one page. If you want to apply a uniform style to an entire website, it is best to use an external stylesheet. This way any changes to the look of the website only need to be made in one place.

Creating the Link and List Styles

In order to put more space in between the links, we add an id to the links called linkStyle and set the padding equal to 10 pixels.

#linkStyle { padding: 10px;}

We also need to add an id called toplinks to the un-ordered list so that we can adjust the list to display horizontally instead of vertically.

#topLinks li {display: inline;}

By setting the property of display to inline, the elements in the list are forced next to one another. This style can be applied to any block element to convert it to an inline element.

#topLinks a{text-decoration: none; color: white; background-color: black;}
#topLinks a:hover {background-color: yellow; color: black;}

We also apply a style to the a tag within the topLinks id. This style sets a background color and text-color for the links as well as removes the default underline. The a:hover style lets you set the background to a different color when the mouse is hovered over the link.

Adding Content to the Tabs

We need to add a div tag below the links to display the page content. Create a div directly below the un-ordered list and set the id equal to content

<div id='content'>
      <br /><b>File Folder Tabs</b>
      Page Content
</div>

In the style, add the following:

#content {
    width: 500px;
    height: 300px;
    background-color: yellow;
    border: solid grey 2px;
    margin-left: 40px;
    margin-top:-10px;
    padding-left: 10px;
}


At this point, you have functional tabs that you can hover over. However, we don't have any code in place to let us know which page we are currently on. The tab that we are currently looking at should be displayed in the forefront. Our content should also change so that we can display different content based on our current page.

If we didn't know PHP, we would need to create a separate page for each link (Page1.html, Page2.html, Page3.html, Page4.html). Then, on each page, we would need to change the style of the link to the current page to show up differently than the others. Since we do know PHP, we can make this dynamic!

Adding the PHP

For the PHP, we want a variable to keep track of the current page. At the beginning of the page, check if a page number was passed through the URL. If not, default the page to number 1.

<?php
if (isset($_GET['current_page']))
    $current_page = $_GET['current_page'];
else
   $current_page=1;
?>

Where we have our links, we need to check if the link is equal to the current page. If it is, we need to display a different style and remove the link. If we are already on Page1, we don't need a hyperlink to Page1.

<ul id = "topLinks">
<?php
if ($current_page == 1)
    echo "<li><font id='noLink'>Link 1</font></li>";
else
    echo "<li><a id = 'linkStyle' href='tutorial2.php?current_page=1'>Link 1</a></li>";
if ($current_page == 2)
    echo "<li><font id='noLink'>Link 2</font></li>";
else
    echo "<li><a id = 'linkStyle' href='tutorial2.php?current_page=2'>Link 2</a></li>";
if ($current_page == 3)
    echo "<li><font id='noLink'>Link 3</font></li>";
else
    echo "<li><a id = 'linkStyle' href='tutorial2.php?current_page=3'>Link 3</a></li>";
if ($current_page == 4)
    echo "<li><font id='noLink'>Link 4</font></li>";
else
    echo "<li><a id = 'linkStyle' href='tutorial2.php?current_page=4'>Link 4</a></li>";
?>
</ul>

Now we have to add the style for an element that does not have a link, noLink

#noLink {
      border-left:solid grey 2px;
      border-right: solid grey 2px;
      border-top: solid grey 2px;
      background-color: yellow;
      padding: 10px;
}
Finally, in the content section, we will display the name of the current page.

In a real application, with separate content for each tab, if the content for each tab is very different you might want to create an include for each tab. Your could name your includes as follows: Tab1.inc, Tab2.inc, Tab3.inc, Tab4.inc. In the main div, you could then write
<?php include('Tab'.$current_page.'.inc') ?>

<div id="content">
    <br /><b>File Folder Tabs</b>
    <ul>
        <?php
            echo "<li>This is page ".$current_page."</li>";
        ?>
    </ul>
</div>



Copy the Code

View the Page

Comments

Post a Comment