I have just implemented some nifty sidebar tabs for navigating around on this blog. I think they look great. They use the javascript provided at OnlineTools called DomTab (Navigation tabs with CSS and DOMscripting). You can download and view the working example at the OnlineTools website. I searched out a way to do this after I saw the very neat navigation tabs used at AlwaysBeta and their post on how to use them. Unfortuneatly, I couldn’t figure out what they where doing (I’m a cut and paste / follow the example pattern kind of guy, and they didn’t provide much in the wat of how to [thats not a knock against them btw]). In the alwaysbeta version, they have incorporated some slick slide and fade effects — to savy for this guy. I’m just happy mine works (tested in IE, Opera, and FF using XP).
Here is how I did it (and you can too). Please read through the entire thing before starting on your own code. Also, cutting and pasting code from this blog has been problematic at best:
Phase One: Making the PHP and the java talk to each other
- Get the files from OnlineTools. The only one that you’ll really need is domtab.js, the other stuff is example CSS styling and html markup
- Upload domtab.js to a nice place on your webserver. I use K2, so I stick everything in a directory off of the themes called ‘js’. The tree structure looks like so: blogroot/wp-content/themes/k2/js/domtab.js
- Make reference to the new script in your page head section by editing your header file and placing the following line (with changed appropriate paths for wherever you placed your domtab.js) somewhere between the <head> …</head> markers. I used this:
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/domtab.js"></script>Notice that it was placed after <?php wp_head(); ?>.
- Now would be a good time to figure out what you want in each tab. Here is the basic code that goes in your sidebar:
<div class="domtab">
<ul class=”domtabs”>
<li><a href=”#t1″>Tab #1</a></li>
<li><a href=”#t2″>Tab #2</a></li>
<li><a href=”#t3″>Tab #3</a></li>
</ul>
<div id=”domtabone”>
<h2><a name=”t1″ id=”t1″>Tab 1</a></h2>
// Do stuff in tab one
<p><a href=”#top”>back to menu</a></p>
</div>
<div id=”domtabtwo”>
<h2><a name=”t2″ id=”t2″>Tab 2</a></h2>
// Do stuff in tab two
<p><a href=”#top”>back to menu</a></p>
</div>
<div id=”domtabthree”>
<h2><a name=”t3″ id=”t3″>Tab 3</a></h2>
// Do stuff in tab 3
<p><a href=”#top”>back to menu</a></p>
</div>
</div>
So to have the 10 latest posts show up in Tab one this is the code I would use:
<div class="domtab">
<ul class=”domtabs”>
<li><a href=”#t1″>Latest</a></li>
<li><a href=”#t2″>Tab #2</a></li>
<li><a href=”#t3″>Tab #3</a></li>
</ul>
<div id=”domtabone”>
<h2><a name=”t1″ id=”t1″>Latest Posts</a></h2>
<ul>
<?php wp_get_archives(’type=postbypost&limit=10′); ?>
</ul>
<p><a href=”#top”>back to menu</a></p>
</div>
- Stick what you want in for the other tabs following the same methodology. As you can see, I have latest posts, tag cloud, and posts that I would like to feature. You can use the Noteworthy plugin to feature some posts like this, I prefer to use Coffee2Code’s random posts plugin to suck out some posts from a range of dates. Both plugins are very well documented.
For those using K2
K2 has a lot of if’s and else’s in the sidebar code. Be sure to grab entire sections of what you need from the original sidebar out, take care to grab an even number of brackets.
At this point, you should have rudimentry tabs working. It should look like ass as we have not yet styled it using CSS.
Phase Two: Making IE, FF, Opera, et al all play nice with your tabs
I found this to be very frustrating. Mainly because I have learned CSS using trial and error and I forget what I have learned a lot. You may have more standards friendly code (I’m almost sure of it, please share). For now, what is pasted below works for me. Yours will be different so be sure to check the domtab CSS that came with the original download and what I have below.
Here is your basic CSS style sheet:
div.domtab{
padding:0 0em;
width:100%;
/* background: Fuchsia; controls the background colour of the whole tab box*/
}
ul.domtabs{
float:left;
width:100%;
margin: 1em 0 0 0;
list-style: none;
margin-top: 0px !important;
display: block;
}
ul.domtabs li{
float:left;
padding:0 0.5em 0 0;
}
ul.domtabs a:link,
ul.domtabs a:visited,
ul.domtabs a:active,
ul.domtabs a:hover{
padding: .2em 1em; /* .2em 1em controls the spacing between tabs themselves */
display: block;
background: #ccc; /* controls the background colour of non active tabs */
color:#FFF; /* controls the font colour of non active tabs */
font-weight:bold;
text-decoration:none;
}
html>body ul.domtabs a:link,
html>body ul.domtabs a:visited,
html>body ul.domtabs a:active,
html>body ul.domtabs a:hover{
height:auto;
min-height:2em; /* 2 em controls spacing between tabs and content */
}
ul.domtabs a:hover{
background: #6699CC; /* controls the background colour of the active tab */
text-decoration: none !important;
}
div.domtab div { /* this CSS selector? controls how everything in a tab is displayed /*
width: auto;
background: none; /* #ccc Controls the background colour of each tab */
/* color:#fff; */
padding: 1em 1em; /* 1em 1em;controls the width of the padding around content*/
margin-top: 0px !important; /* Fix for IE */
}
ul.domtabs li.active a:link,
ul.domtabs li.active a:visited,
ul.domtabs li.active a:active,
ul.domtabs li.active a:hover{
background:#6699CC;
color:#fff;
text-decoration: none !important; /* I'm not big on underlined links */
}
#domtabprintview{
padding:.5em 4em;
text-align:right;
}
#domtabprintview a:link,
#domtabprintview a:visited,
#domtabprintview a:active,
#domtabprintview a:hover{
color:#ccc;
}
div.domtab div a:link,
div.domtab div a:visited,
div.domtab div a:active
{
/* You can control the colours of the links in your tab seperate from the rest of your blog here, I have chosen not to do that, except to make sure that the line height (spacing) jives with the rest of my style*/
line-height: 1em;
}
div.domtab div ul li {
margin: 0;
line-height: 1em;
}
Here is an optional example of how to go about styling each tab using the DIV ID’s specified in the sidebar:
#domtabone {
background: #ccc url("correctpath/domtabgbackground.jpg") repeat-x top left !important;
}
#domtabtwo {
background: #fff url("correctpath/domtabgbackground.jpg") repeat-x top left !important;
}
#domtabthree {
background: #fff url("correctpath/domtabgbackground.jpg") repeat-x top left !important;
}
Can you help?
As of 02/27/06 there is a slight difference between IE and FF/Opera. I am not a CSS whiz — if you, CSS guru, could take a look at what I have done and make it better, please leave a comment or drop me a line. Full credit where credit is due too.
27 Feb 06
6:48 pm
[...] Updates will be made as they happen with a complete v1.0 release of the K2 theme. Also, the current version does not include the Navigation Tabs shown in the sidebar as it requires modifying the Sidebar code — I’m still working on it. [...]
01 Mar 06
12:41 am
I’d taken a brief look at aB’s code for their tabbed menu a while ago since it’s such a nice solution (never really got time to go back and pull apart the code myself), but it’s good to see you’ve gone more of a clean CSS route without all the prototype and moo.fx js stuff they use for everything.
I can help you out with the aesthetics and functionality of the tabbed box since I know far more CSS than I ever wanted to, hehe. I’ve got a nifty sidebar idea myself that I’m trying to figure out how to minimize any overhead or scripting for… it’s amazing what can be done with just CSS sometimes. Anyhow, we’ll have to discuss that.
As for the display differences in Fx and IE, they’re inevitable and you have to be really aware of all the stupid hacks you need to throw in if you want to make it look and work as closely as possible cross-browser. For a quick fix you might want to try out Dean Edward’s IE7 which is basically an all inclusive patch that detects the browser and then runs scripts if they’re using IE to transform all your layout info and such into behaviours that IE will follow correctly. Check out his page on it here to see if it helps. While you’re there poke around a bit… he does some great stuff!
Ja
04 Mar 06
2:29 pm
[...] I’ve drooled over the layout of alwaysBETA for awhile now, and last night I decided to add the similar “tabbed sidebar” on this here very site! Using maxpower.ca’s How-To as a guideline, it took less than an hour to adjust things to my liking. And other than some minor IE problems, I think it looks and works quite magnificently. [...]
04 Mar 06
4:57 pm
Great walkthrough.
How do you style the individual tabs?
04 Mar 06
5:35 pm
Eli,
I’m not sure what you mean “Individual tabs.” I’m happy to share anything.
07 Mar 06
7:09 am
[...] Over at Maxpower, Kirk Montgomery wrote a nice ‘How To’ post that dealt with adding a tabbed navigation to the sidebar of K2/Wordpress, similar to that done on the AlwaysBeta site. To quote Kirk, he says “they have incorporated some slick slide and fade effects — to savy for this guy”. Well here is my contribution to this how-to - yet be warned, this is probably down and dirty code…but it works. As I always say I can’t code to save my life I just copy/paste what others do. [...]
07 Mar 06
7:14 am
Nice post…although the DomTab libraries seem a bit OTT for this.
With respect to your comments about the “slick slide and fade effects” I’ve added some hints about this on my site. That should help you put those nice effects in place. Good luck.
08 Mar 06
7:04 am
Howde.
Just a quick update on my last post. I have updated the script. It is now AJAXified and the issue with the ‘back’ button is sorta fixed (now a maximum of 2 clicks are needed to go back!). It’s getting late here in Australia, so I’ll post the ‘how-to’ tomorrow.
08 Mar 06
7:11 pm
[...] There are some differences between browsers that I would like to iron out. See below for details and how you can help. I have just implemented some nifty sidebar tabs for navigating around on this blog. I think they look great Tabbed Sidebar How-to by MAXPOWER [...]
08 Mar 06
7:11 pm
[...] There are some differences between browsers that I would like to iron out. See below for details and how you can help. I have just implemented some nifty sidebar tabs for navigating around on this blog. I think they look great Tabbed Sidebar How-to by MAXPOWER [...]
08 Mar 06
7:57 pm
[...] Tabbed Sidebar How-to by MAXPOWER [...]
09 Mar 06
12:53 am
Howde,
I hope you don’t think I’m stalking you…but I’ve updated the script. It’s on my site. I am not going to be changing it again any time soon. If you get to use, send me a link.
Cheers.
17 Jun 06
11:39 pm
[...] Deepthought has a good tutorial on how to create Sidebar Tabs for K2. You may implement it on your blog to save some of your precious sidebar space. Here’s a screenshot [...]
26 Jul 06
9:06 pm
Thanks for the tutorial deepthought, a link has been added from my site, and I am considering using this for my sidebar.
Drixer
03 Sep 06
11:44 pm
Hi all. I am trying to put this not on the sidebar but above the entries on my blog. I am testing this out on my test page right now and when I click on the tabs it doesn’t take me to the tab at all.
I am really lost with this. Any help would be appreciated.
04 Sep 06
12:15 am
Kevin,
The Domtab.js is incorrectly sourced. You currently have:
script type=”text/javascript” src=”This is a test blog/js/domtab.js”
I don’t know what the real source location for this file is, but its wrong as it is written above.
17 Sep 06
7:46 pm
I tried this using Firefox and ran into an issue. Does Firefox read CSS differently then IE? Looks great in IE.
17 Sep 06
8:03 pm
Yes. All browser interpret CSS differently depending on how much they adhere to the standards set out by W3C (I think). AEven my tabs appear slightly different IE vs FireFox.
18 Sep 06
8:41 pm
Great tutorial. How do you get four tabs on the same line? I’m trying the sidebar tabs at the bottom of my sidebar, but I’m getting the forth tab on a new line. Please ignore the style of the sidebar tab, I’ll work on colors later. Thanks.
23 Jan 07
11:58 pm
Hi! Why I can’t fill my info in profile? Can somebody help me?
My login is Kisakookoo!
27 Feb 07
9:51 am
[...] 現在使用中のWPテーマBinary Blueの次回バージョンアップでは、テーマのオプション画面から簡単にタブサイドバーを構築できるようになるそうです。 タブサイドバーといえば、MaxpoweのK2のプラグインが既にありますが、導入もCSSも大変でした。それがオプション画面で簡単に導入できる、しかもそのままテーマに馴染むとなれば、最強ですね。 画像はまだ構想段階なので簡素です。 現在テーマはv1.4.0ですが、既にものすごく機能が豊富です。 [...]
07 Mar 07
3:52 pm
[...] Navigation Tabboksen øverst til højre af Maxpower [...]
08 May 07
1:11 am
Hey guys……….
I’ve done as it is said in this great “tutorial”, but I did not suceed.
The problem is when I click what should be the tabs, they act as a normal link and the, do not work at all.
Any ideas?
FABRICIO
08 May 07
1:54 am
Ooops, I think I made it work.
but when my page is loaded (and to tell the truth, also when your/this page loads) it goes down to the end and does not come back to the begining.
Why?
Any ideas to solve that?
FABRICIO
03 Aug 07
1:25 am
Tried this but couldn’t get the tabs to show up (just their names) - problem with my template? Also when I clicked on one of the tabs it just said url not in this domain but I was using the same directory approach as you eg /js/domtab.js
Any update on this (it started awhile ago) and/or details of another version?
Yours look great.
04 Sep 07
10:30 am
For those who maybe having trouble with this tutorial, please search and replace all funky “smart quotes” and apostrophes with real quotes and apostrophes in a text editor. It should work then.
Hopefully, the author will clean those up as this is a valuable resource and it needs to work with just copy and paste.
08 Sep 07
7:02 am
[...] How To: Sidebar Tabs for K2 in WordPress [...]
25 Jan 08
4:32 am
Hi Kirk and Everyone,
Thanks for making this tutorial and contributing, I’ve been wanting to implement these tabs for ages..and finally managed to get some setup
soo..
I followed the tut here and managed to get everything working, but Im having one weird problem Ive spent hours searchin the net but am still clueless..
Basically the tabs seem to work ok, and everything else seems to work ok, but when you click directly on the comments link from the bottom of a post my right sidebar jumps over to the left and the rest of the page dissapears.. its weird the rest of the site seems ok
In Ie, I get this error:
Can’t move focus to the control because it is invisible, not enabled, or of type that does not accept focus
and in firefox (firebug):
links[i] has no properties
checkURL()domtab.js (line 70)
init()domtab.js (line 34)
[Break on this error] cur.currentLink=links[i];
http://newworldjournal.com/wp-content/themes/neoclassical/domtab.js
Line 70
I’ve tried everything I can think off, but just cant seem to fix it, you can see it here on my testsite:
http://www.newworldjournal.com
Im hoping it may be something really simple like it often is, and hopefully someone can point me in the right direction.
Many Thanks
Martin
06 Apr 08
10:45 pm
io2zTJ Hi! Nice site! Where is a add to favorite button&
http://www.mysite.com
06 Oct 08
3:26 pm
Hey martin,
I’m getting the same issue on a site!! No fix sadly!
17 Oct 09
3:48 pm
I had the same problem as Forest (06 Oct 08) and Martin (25 Jan 08). I bet you did the same as I: Hid the element on each page required by Domtab to work. Make it visible again, and for example transparent, and the error is gone. Pekka