Javascript Tabs for a full site

[lolly]

Here's a strange one, Lol's minds been working overtime. I was wondering if anybody has seen yet a website made entirely of one page but with a Javascript style tab, filling the whole page. So in theory you never click to another page just the tabs work as a navigation displaying the content.

I mean tabs like these....

index

I know you've got the whole argument about 'what if the user doesn't have JS enabled' but it's the same argument made with a flash plugin except these tabs can be read by google bots making it a bonus.

Any thoughts or an example if somebody has already done this would be great

[tommylogic]

Yeah.. I actually looked into it quite a bit. I finally came to the conclusion the easiest way to accomplish the effect would be with MooTools Accordian or their Fx.Slide

In the end though, I decided not to go about it that way. I had a website set up for it fairly well, just never did it. The only difficult part about it would be getting the proper css degradation.. shouldn't be too hard to accomplish though.

[cerus]

I know what you mean there Tommy but surely those scripts fail because full content that fill a site would mean scrolling down to read it, but the tab option above could keep it all pretty straight and a horizontal lick to the next page?

[tommylogic]

no.. the don't scroll.. they slide

the css degradation is simple as creating a stylysheet that handles the div's accordingly like any other page in the case that JS is turned off. Those particular sets I mentioned just create a transition effect to move between the div's. Spry for Dreamweaver has a very similar library that allows you to build it straight in from Dreamweaver... Spry Sliding Panels

I looked at this whole concept pretty hard... and TOTALLY get why Lolly is thinking about this

[lolly]

Have you got contradiction head on tonight? Cerus is quite correct because you have to scroll down to click the bottom tab so it doesn't work the same way as having a nav along the top using the tabs I linked to

[tommylogic]

wow.. argumentative tonight i see Actually, if you were to look at it more closely, you'll notice you can set the link off just about anything. You'll notice that more apparently in the Spry demo as they demonstrate it as such. So you can put a tab, text, button.. whatever your little heart desires.. its purely aesthetic.

[lolly]

But that wasn't so on the first example you had to scroll to the bottom to click the bottom accordian

[tommylogic]

Its the same really, just they used the bar as the click call for the js. It could be anywhere. But I did find this too, speaking of tabbed one-page layouts.

Stu Nicholls did it a couple years ago with One-Page CSS tabbed browsing
thats a pretty slick way of doing it with pure VALID CSS. I prefer the second demo on his page with no scroll bars.

[lolly]

Yep that's nice I'd prefer a click than a hover though

[tommylogic]

I know what you mean about the hover.. he does a really cool image gallery like that too> Not JavaScript but a really cool effect that can be achieved with pure CSS
Cross Browser Multi-Page Photograph Gallery