tutorials.mezane.org— This tutorial will teach you how to create low-bandwidth tab navigation on a web page using CSS. As an extra bonus you'll also learn how to switch tabs without loading the page more than once.
May 20, 2007View in Crawl 4
I noticed this too. The draw back of having "multiple pages" built into one webpage is that the browser will only recognise it as one page, so the forward and back buttons will not function as (non-webdesigners) would expect. This can be an accessibility issue.However, on the plus side: each tab is bookmarkable. Notice that navigating each tab adds a #Step_1, #Step_2, etc to the address, so you can link directly to any given tab.Good job on the tutorial by the way, I can't wait to try it with some of my new designs.
I'm having problems with this tab method using Safari, anybody else? For example, on the instructions page, the "page1.html" sample link at bottom of Step1 doesn't work right using Safari, but does with every other browser. I'm having a similar problem on the page I'm building, anchor links don't work right.
Does anyone know how I could use two seperate sets of tabs on a single page? without having to use two seperate copies of the code? Is this at all possible? Thanks
Safari breaks all links that aren't to the tabs. For some reason it thinks that all links contain the hash. This can be fixed by changing this if statement: "if (a.hash)" to "if (a.hash.match(/#(w.+)/)) "
rubahMay 22, 2007
@seanmc303, edg3padding: 0 0 10px would be better shorthand. (top/bottom right left)
doctorgrondoJun 6, 2007
I noticed this too. The draw back of having "multiple pages" built into one webpage is that the browser will only recognise it as one page, so the forward and back buttons will not function as (non-webdesigners) would expect. This can be an accessibility issue.However, on the plus side: each tab is bookmarkable. Notice that navigating each tab adds a #Step_1, #Step_2, etc to the address, so you can link directly to any given tab.Good job on the tutorial by the way, I can't wait to try it with some of my new designs.
detoJul 18, 2007
I'm having problems with this tab method using Safari, anybody else? For example, on the instructions page, the "page1.html" sample link at bottom of Step1 doesn't work right using Safari, but does with every other browser. I'm having a similar problem on the page I'm building, anchor links don't work right.
duyleqAug 16, 2007
useful, easy apply...thanks
craig5320Oct 23, 2007
Does anyone know how I could use two seperate sets of tabs on a single page? without having to use two seperate copies of the code? Is this at all possible? Thanks
cpmv2Jan 1, 2008
Oh man I am having the same issue with Safari. I emailed the author of the script for some advise.
orangebillMar 26, 2008
Safari breaks all links that aren't to the tabs. For some reason it thinks that all links contain the hash. This can be fixed by changing this if statement: "if (a.hash)" to "if (a.hash.match(/#(w.+)/)) "
detoSep 16, 2008
Well, that statement fixes the links, but breaks the tabs. By the way, this problem is in Google Chrome as well, so it must be a Webkit issue.
spicecodeMar 28, 2009
Did anyone ever find a solution for this?
andreasblixtMay 6, 2009Submitter
This article has been superceded by the following: <a class="user" href="http://blixt.org/articles/tabbed-navigation-using-css">http://blixt.org/articles/tabbed-navigation-using- ...</a>
gpsnaviMay 15, 2010
Nice and I'm going to build my site <a class="user" href="http://www.googlenavi.com" rel="nofollow">http://www.googlenavi.com</a> using this tabs