Sep
14

CSS tabs without javascript

CSS          Trackback

Here is one example of CSS tabs, which is not using any of javascript. It is simple and it must have fixed height (250px in this example). Trick is to create all tab contents on one page, and to show only one at the time. Imagine that you have one long page, and scrollbar at right side. This is kind of like that, just you can’t see that scrollbar 🙂

If you like it, grab the code and use it.

CSS tabs without javascript [SOURCE CODE]
CSS tabs without javascript

CSS tabs without javascript


2 Comments

Make A Comment
  • nick Said:

    this is great, thanks!
    question – is there any way to use this without having the page scroll to the tab content? i want to have the tabs in the middle of the page, but i don’t want the browser to scroll down to it.

  • Vlatko Zdrale Said:

    I don’t think that there is a way to do that without javascript, because navigation is tied to content by #page1, #page2,… links and they always makes your browser to scroll to it.
    If there is someone out there who knows how to do that (without js 🙂 please enlight us…

Comments RSS Feed    TrackBack URL

Leave a comment

top