In this recipe, you'll learn the markup and styles you need to bring an easy tabbed interface to life.. Getting started You need to have a basic theme constructed, and need to have separ
Trang 1Finally, you included this component into your header.php file so that it shows across every page of your site Once it was included appropriately, you styled it by using some good looking colors and layout
Creating tabbed navigation for your theme
One of the easiest visual clues that you can offer your users is that of active and inactive tabs This lets them know exactly where they are on your site at any moment In this recipe, you'll learn the markup and styles you need to bring an easy tabbed interface to life
Getting started
You need to have a basic theme constructed, and need to have separated your main
navigation items into their own pages in the WordPress back-end
How to do it
For this recipe, we're going to concern ourselves with a simple, one-column site with
horizontal, tabbed navigation While this technique can be applied to a variety of situations, the horizontal tabs are definitely the easiest Your index.php file should look something like the following:
<?php
get_header();
?>
<div id="content">
<?php
if( have_posts() ) {
while( have_posts() ) { the_post(); ?>
<div <?php post_class('post-container'); ?>>
<h2 <?php post_class('post-title'); ?>>
<?php the_title(); ?>
</h2>
<div <?php post_class('post-excerpt'); ?>>
<?php the_excerpt(); ?>
</div>
<div <?php post_class('post-controls'); ?>>
<a href="<?php comments_link(); ?>">
<?php
comments_number(
('No Comments'),
('1 Comment'),
Trang 2);
?>
</a>
<?php if( is_user_logged_in() ) { ?>
<?php edit_post_link('Edit'); ?>
<?php } ?>
</div>
</div>
<?php } } ?>
</div>
<?php
get_footer();
?>
Next, make sure that your header.php file resembles the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_
attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php
bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title> <?php bloginfo('name');
wp_title('—', true, ''); ?></title>
<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>
<?php wp_head(); ?>
</head>
<body <?php body_class('classic'); ?>>
<div id="wrap">
<div id="header">
<h1><?php bloginfo('name'); ?></h1>
<?php wp_page_menu(array('depth'=>1, 'show_home'=>true)); ?>
</div><! closing of the header div >
<! end header >
Trang 3Open your browser to view the changes Assuming that you haven't added any styles yet, your theme will resemble the following screenshot:
Now to make the magic happen, and get those tabs aiding your users, you need to add some styles For now, you'll just get the basic tabs down In the future, you can use variations on this technique to make your sites' navigation beautiful First, let's establish a solid container that wraps all of the content Luckily, you already have an element to style that wraps everything Add the following code to your theme's stylesheet, style.css:
.wrap {
margin: 0 auto;
width: 960px;
}
Trang 4Now let's separate the content by setting up a border around it Here, we'll use a simple black border that surrounds the entire contentdiv Insert the following code into your stylesheet:
#content {
border: 1px solid #000000;
padding: 10px;
clear: left;
}
If you've got everything done correctly, you should have something that resembles the following screenshot, which shows a standard vertical list of links:
Trang 5Now you can style the header navigation links to look like tabs For the purposes of this recipe, the active tab will be shown by removing the border between the tab and the main content area Inactive tabs will be gray, but will brighten to a slight off-white color on hover For now,
we just need to get the items in the correct positions, though We'll start by styling the list and list elements Insert the following code into your stylesheet:
#header {
float: left;
}
#header menu {
border: 1px solid #000000;
border-width: 1px 0 0 1px;
float: left;
margin-bottom: -1px;
}
#header menu ul, #header menu li {
float: left;
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
}
#header menu li {
border: 1px solid #000000;
border-width: 0 1px 1px 0;
display: block;
font-weight: bold;
text-align: center;
}
#header menu li a{
display:block;
padding:10px;
text-decoration:none;
background: #dedede;
}
This code floats the list items appropriately, and makes them display along the top edge of the
contentdiv
Trang 6Save your changes, and then open your browser to view the results The result is something like the example shown in the following screenshot, which shows the list items now in a horizontal row, surrounded by rectangular shapes, and no list-style type (bullet or number):
All that's left to do at this point is to handle the colors and the active tab Insert the following code into your stylesheet:
#header menu li a{
background: #dedede;
#header menu li a:hover{
background: #efefef;
}
#header menu li.current_page_item{
border-bottom-color:#ffffff; /*note: you can use a different color here as needed */
}
#header menu li.current_page_item a{
background:#ffffff; /*note: you can use a different color here as
Trang 7At this point, you should have some fully-styled tabs Try them out by hovering over and clicking on another tab You'll see the active tab changes on page reload The following screenshot shows the end result when you're visiting the About page and hovering over another tab:
How it works
The key to this recipe is the styles applied in your theme's stylesheet Most of the techniques used are not worth a rehash However, there is one important set of styles that deserves to
be highlighted
In the markup generated when WordPress renders this template, you end up with something that looks like the following code:
<div id="header">
<h1>Theme Testing Platform – 5</h1>
<div class="menu">
<ul>
Trang 8<a href="http://5.themes.local"
title="Home">Home</a>
</li>
<li class="page_item page-item-2">
<a href="http://5.themes.local/about/"
title="About">About</a>
</li>
<li class="page_item page-item-119">
<a href="http://5.themes.local/about-2/"
title="About">About</a>
</li>
</ul>
</div>
</div>
<div id="content">
<! Lots of stuff >
</div>
Ordinarily, this markup would cause the menudiv to sit directly on top of the contentdiv
If you were to apply a border to the bottom of the items in the menudiv and the top of the
contentdiv, you would get a doubled-up border
However, you'll notice the following style declaration was created in your style.css file:
#header menu {
margin-bottom: -1px;
}
This declaration tells the browser to overlap the menu and contentdivs by moving the
menu div down 1 pixel on top of the content div Now, the items inside the menudiv that have bottom borders don't double up with the content div; they overlap the border of the
contentdiv
Later on in your stylesheet, you'll notice that the current page list item is styled differently to the rest:
#header menu li.current_page_item {
border-bottom-color: #ffffff;
}
This declaration tells the list item of the current page to style its bottom border with the same color as the background of the main content area Because this bottom border overlaps the top border of the content div, this style effectively makes the border seem to disappear underneath the active item
Trang 9There's more…
Maybe you want to use images as backgrounds on your menu items, or learn about other ways to structure your navigation in order to make your theme more unique There are many more resources on the web to help you out
Many menus, many resources
Due to the flexibility of WordPress, you can use many different kinds of CSS and JavaScript driven menus, with a dash of PHP if you like Visit the following resources to learn more about different types of menus and other navigation structures:
http://www.alistapart.com/topics/code/css/
http://www.w3schools.com/css/css_navbar.asp
http://codex.wordpress.org/Dynamic_Menu_Highlighting