Tibor SzászInteraction matters

Tabbed CSS only website template

Did you know what a small anchor link can do for you? More, than you might think. You can turn it into an advanced navigation on your website. There is nothing new in this, it was designed to do this. This only make sense, if the scrollbars are visible in your browser, isn't it? Well, no. Anchor links even work, when the invisible content is in an overflow: hidden container. The target element should have the same ID as the anchor link's href attribute.

Show content

   Very very long text... images... forms... btw my over flow is hidden...
   

       I'm invisible by default, 
       but your click just revealed me. :)
   

I've created an example website template, that can be uses for free. You can download it right below.

Click here for a LIVE DEMO

File attached to post: css-tabbed-website-template.zip

miért angol a cikk, ha az oldal többi része magyar?

és mi ebben olyan nagy újdonság?

Szia Balázs,

A blog elsősorban angol nyelvű, de a kezelőfelület megvan magyarul is.

Az újdonság az, hogy a megoldásom működik Operában is, valamint nem szükséges JavaScript a dologhoz. Ad továbbá egy roppant egyszerű szemléletet is, amivel gyrosan lehet látványosat alkotni.

Very nice I must say. I was a bit confused at start but then I got it. ^^

Not very SEO friendly. Search engines dont ready after the #

Very cool concept, but when I hit the back button it doesn't go back to the actual content. Sure JS could fix it, but then it won't be 100% CSS.

Still nice article, bookmarked.

"Not very SEO friendly. Search engines dont ready after the #"

@Jones: Doesn't matter much, any engine will index the all the content in the page anyway.

Thank you for your replies.

@Jones: you have all the content on one page, without css it's just a simple, structured document. You can also make a sitemap.xml with hashmarks included.

Great post, i've been working on this for few days and after a while i came up with the same solution you just wrote about.

Thanks for share

This is super cool. I can't wait to dig into it more. Thank you for sharing.

I can see a very big flaw in this. The user can use their mousewheel to scroll through the content without using the tabs. Good use of CSS and HTML, but not very usable in the real world.

Thank you for showing us this article, it is really very well written and well constructed from top to the bottom. I found out it is easy to follow your tips.