Simple DIY Tab-Style Navigation Tutorial

This post discusses the possibilities to easily implement a tab-style navigation bar, like the one found on the plugin pages at wordpress.org. It’s a very basic tutorial most suitable for beginners. Folks experienced in HTML and CSS will find little new here.

In cases when it is used regularly, a tab bar would be implemented by a plugin. But when it’s usage is more an exception than a rule, it may make no sense to descend into hacking. Some really simple HTML and CSS will perfectly do.

There are several ways to implement a tab bar. Two common and simple ways are to build it on top of
[toc class=toc-right style=”max-width:50%”]

• simple paragraphs containing links,
• on top of bullet lists.

In addition, tab bars can be horizontal or vertical. I’ll cover both cases, with both of the above methods.

Common to both methods is that HTML elements provide the basic structure, while the real styling is done with CSS. In a way, HTML is the “canvas” on which you paint with CSS.

I’d like to add that I’m aware I won’t win a contest in beauty for tab bars with this article. They can be made much fancier than I do here, especially by incorporating background images. However, I wanted to keep the samples as simple as I could get away with without making the tab bars unrecognizable as such. 😉

Assigning CSS Classes To HTML Elements

All variants require editing the CSS class of some HTML element. Alas, the WordPress visual editor does not provide for doing that in WYSIWYG mode. Hence, you need to switch to HTML mode, and find the tag in question: A <P> or <A> element for the first method, an <UL> or <LI> element for the second.

The <P> tags are tricky though. Even in HTML mode they are only shown if the paragraph has non-default formatting. Otherwise, all you’ll see are two consecutive line breaks separating the paragraphs.

In order to force a visible <P> tag, apply the “Align left” formatting to the paragraph from the topmost tool bar in WYSIWYG mode, then switch to HTML mode, where you’ll see something like

<p style="text-align: left;">

Now, replace style="text-align: left;" with class="CSSclass" (replacing, of course, CSSclass with an appropriate value).

Any other tag will already be visible in HTML mode, and you only need to add the class attribute (i.e., the code class="CSSclass").

A Paragraph-based Tab Bar

A paragraph-based tab bar is a simple <P> element that contains a series of links (<A> tags). To establish a “canvas” for CSS styling, we give the paragraph a class attribute (the value of which will depend on the tab bar orientation). Also, in order to distinguish the active tab, we give the link that represents it the class attribute “active”.

Horizontal Paragraph-based Tab Bar

Below is a simple horizontal tab bar:

The corresponding HTML (not including the “Lorem Ipsum” part) is:

<p class="horizontal tabbar">
<a class="active" href="/solutions/wordpress/sliding-notes">Sliding Notes</a>
<a href="/solutions/wordpress/toc-boxes">TOC Boxes</a>
<a href="/solutions/wordpress/series">Series</a>
<a href="/solutions/wordpress/widgetvoodoo">Widget Voodoo</a>
</p>

Note the utilization of two CSS classes: “horizontal tabbar”. It helps simplify the CSS clauses, by separating orientation-dependent from orientation-independent clauses, and reusing the latter.

Here’s what the CSS looks like so far:

p.tabbar {
	background-color: whitesmoke;
	margin-bottom: 1em;
}
p.tabbar a {
	text-decoration: none;
	border: 0;
	padding: 2px;
}
p.tabbar a:hover {
	color: firebrick;
}
p.tabbar a.active {
	background-color: #fcfcfc;
}

p.horizontal.tabbar {
	border-top: 1px solid lightgrey;
	padding: 5px 3px 2px 3px;
}
p.horizontal.tabbar a {
	padding: 2px 2px 3px 2px;
}
p.horizontal.tabbar a.active {
	border-top: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
	border-bottom: 1px solid white;
	border-left: 1px solid #d8d8d8;
}

Vertical Paragraph-based Tab Bar

Sometimes it is desirable to lay out the the tab bar vertically. Two common positions are the rightmost or leftmost edge. I’ve chosen the CSS class combination “vertical tabbar” to represent the general case of vertical orientation. The additional classes “to-the-left” and “to-the-right” refine the general case for the corresponding position. The main distinction between left- and right-sided tab bars is that text alignment and some other styles are mirrored.

Here is a sample vertical tab bar located to the left:

Here is a tab bar located to the left.

The HTML code for the left-sided tab bar is:

<p class="vertical tabbar to-the-left" style="float:left">
<a class="active" href="/solutions/wordpress/sliding-notes">Sliding Notes</a>
<a href="/solutions/wordpress/toc-boxes">TOC Boxes</a>
<a href="/solutions/wordpress/series">Series</a>
<a href="/solutions/wordpress/widgetvoodoo">Widget Voodoo</a>
</p>

The right-sided tab bar is the same, except for the attribute style, which is “float:right” of course.

Here is the CSS required for both sides (in addition to the basic tabbar CSS from before):

p.vertical.tabbar {
	display: inline-block;
}
p.vertical.tabbar a {
	display: block;
}
p.vertical.tabbar a.active {
	border-bottom: 1px solid #d8d8d8;
	border-top: 1px solid #d8d8d8;
}

p.vertical.tabbar.to-the-left {
	margin-right: 1em;
	text-align: right;
	border-left: 1px solid lightgrey;
	padding: 3px 2px 3px 3px;
}
p.vertical.tabbar.to-the-left a.active {
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid white;
}

p.vertical.tabbar.to-the-right {
	margin-left: 1em;
	text-align: left;
	border-right: 1px solid lightgrey;
	padding: 3px 3px 3px 2px;
}
p.vertical.tabbar.to-the-right a.active {
	border-right: 1px solid #d8d8d8;
	border-left: 1px solid white;
}

Wrap-Up

The article presented a detailed instruction to manually construct different tab-style navigation bars. It included working, ready-to-use HTML and CSS code.

In a later post, I could cover list-based tab bars if there’s demand for it. If anybody is interested, feel free to drop me a note.

I’d also like to announce an upcomming tab bar plugin, fully based on the method covered here, but featuring automatic tab compilation based on various criteria.

11 Comments

• 
  chris July 23, 2009 at 1:16 pm

  thanks a billion, excellent article which has been very well written, i’ve been wondering for a while the best way to implement something very similar.
  • 
    Hackadelic July 23, 2009 at 2:43 pm

    Chris, you are welcome 🙂
• 
  Patrick (HKG) April 1, 2009 at 4:27 pm

  DNS resolution

  http://www.ccie.hk = root/home/”accountDir”/”dir01″/
  the index.php ad .htacess and rest of WP stuffs are saved within dir01

  settings:
  WordPress address (URL)=> http://www.ccie.hk
  Blog address (URL) => http://www.ccie.hk
• 
  Patrick (HKG) April 1, 2009 at 4:21 pm

  Hi,

  I have problem in implementation of permalinks into my blog hosted with my Linux server.

  After troubleshooting for hours today, I just managed to get the permalink workable, but with “/index.php/%postname%”

  situation like this:
  http://www.ccie.hk/index.php/wpplugin-hackadelic-sliding-notes-v14

  Can you advis what’s go wrong? :<

  Patrick
  • 
    Hackadelic April 1, 2009 at 10:49 pm

    Patrick, in order for pretty URLs to work, your WP needs to write/modify a .htaccess file in its installation directory. That means, it need write access for that file. Perhaps that’s the problem.

    The .htaccess contents should look something like this:

    # BEGIN WordPress
    RewriteEngine On
    RewriteBase /root/home/"accountDir"/"dir01"/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule .  /root/home/"accountDir"/"dir01"/index.php [L]
    # END WordPress
• 
  Patrick (HKG) March 31, 2009 at 6:26 pm

  “you should definitely adjust your permalink settings….”

  speakless, you read my mind … as I have been thinking this problem
• 
  Patrick (HKG) March 31, 2009 at 7:39 am

  Hi,

  I have implemented tab-style navigation bar at here

  http://www.ccie.hk/?p=458

  I intended to make feeling like switching (flipping) pages, but I found it was a bit difficult to edit link numbers for each post, so it will take me some time to fine tune it and to make the editing smooth …
  • 
    Hackadelic March 31, 2009 at 3:29 pm

    Patrick,

    you should definitely adjust your permalink settings. It’s a MUST if you plan on doing any SEO or any other PR about your blog. (That is, if you plan to make your blog popular. It’s also makes interlinking posts much easier, as you can simply type in the post slug, and not look up the post ID first. This is particularly important if you plan to use your blog in part as a knowledge base (as I know you do).

    Go to Settings->Permalinks, select “Custom Structure” and enter “/%postname%”. That’s the optimal permalink structure.

    That would improve your trouble with getting the post ID’s right, as with the above setting the URLs are formed from a sanitized version of the post title, which is much more memorable. The URL you provided, http://www.ccie.hk/?p=458, would then become http://www.ccie.hk/chapter-1

    Much easier, right?
  • 
    Hackadelic March 31, 2009 at 3:42 pm

    Patrick, another thing: The plugin I’m working on will be probably better suited for you use case than manually implementing the tab bars. (Though it’s a good exercise to go through the process once if you want to learn more about how HTML & CSS work together.)

    Will you link together distinct posts, or is it more like different chapters (headings) in one post?

    If it’s the former, there is a concept that might suite you: A series. I implemented a plugin for that, and I can imagine you could use that as well to organize posts sequentially into a “whole”. Needless to say, my upcoming tab bar plugin will support building tab bars automatically from posts in a series. 🙂
• 
  Patrick (HKG) March 30, 2009 at 6:54 pm

  Hi Zoran,

  Thanks! I will go thought your post in details and will try to implment the HTML/CSS scripts in my blog soon. I know that you wrote this post and scripts specially for addressing a question of mine about tab-style navigation for wordpress, so I don’t mind sharing some ideas behind I asked for this functions on my WP blog.

  1. Like many people, I love collecting things, and I have been using and transform WP as a web-based system to manage my archive. The archive could be:
  – study notes of mine
  – interesting articles found/learnt from the Internet
  – video / DVD collections etc.

  However, the information could be classified as
  – objects (computer files),
  – attributes (value, keywords, tags) and
  – statement (text)

  I found that WP could be a handy and instant solution to edit, store, manage, present and collaborate statement and (file) objects in organized manner, and form an informative archive.

  2. In commercial world, such inforation management system is common, and there are profressional programmers and company work for these kind of application. But they aren’t for personal, too big and too expansive.

  3. Apart from blogware, there are Wiki and MS sharepoint appears (become popular) in the past 5 years. I chose WP because this is the first blogware I can manage and make it works on both my wintel PC (with WAMP) and linux server on the Internet. I tried to learn media Wiki, but gave up.

  4. There are books teaching how to use the blogware, wiki and MS sharepoint for basic editing and blogging. There are books about programming with MS Access and PHP/mySQL for applications, I will learning programming but I am wondering if there are better alternative – transformating WP instead of start from basic.

  5. I have been thinking what exactly I wanted for the info management system in my mind … to be honest, I don’t have a solid requirement … but I think it should have features as below:
  – multimedia enabled, click and play the sound or video
  – rich tools and feastible to classification or build hierarchy of info.
  – with database and searching engine for free
  – supports Asian languages and UTF-8
  …
  and …
  – feature for navigation and presentation of info

  That’s why I asked for the tab-style navigation bar ….

  bye for now, ttyl

  cheers,
  Patrick (HKG)
  • 
    Hackadelic March 31, 2009 at 2:59 am

    Whew, Patrick, your input and questions are always challenging 😉

    I had (and still have) similar needs. My best bet on this matter were personal wikis, but they have no or limited web connectivity. One technology I’ve found promissing is TiddlyWiki, and its off-spring MPTW, on which my online personal wiki is based.