Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
1

is it possible to create a tabbed interface using just css, no javascript? I mean to be able to switch the tabs using css/html, without javascript. Maybe with CSS 3.0?

the markup would be something like:

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

<div id="tab1"> ...1... </div>
<div id="tab2"> ...2... </div>
<div id="tab3"> ...3... </div>
share|improve this question
2  
JavaScript-less interactions are nice in theory, but they break the "holy-trinity" of web development. HTML is meant for Content (Model), CSS is meant for Style (View), JavaScript is meant for Interaction (Controller). If you don't want to use JavaScript, HTML and CSS have to take up the slack, which means you'll be changing your markup to change the style. Generally speaking, you should leave the interactions to JavaScript, and plan for graceful degradation with your style sheets. – zzzzBov Feb 8 '11 at 21:32
@zzzzBov HTML in my opinion is meant the be the view. The model is where the data lies (in a database?) and the controller is the code that manipulates the data (PHP or ASP on the server, perhaps?) CSS and JavaScript are to provide visual enhancements, but if they are removed, the website should still function - otherwise it would break the HTTP model! – Greg Nov 11 '11 at 14:16
@Greg, In the context of the UI, HTML contains the data and is the model. If you're talking about the overarching context of a web application, your database is the model, your controller is a server script and your view is the generated HTML, CSS, & JS. – zzzzBov Nov 11 '11 at 14:20
@zzzzBov Then someone like me comes along, who browses with JavaScript off by default (since even large well known sites get compromised) and curses your name forever because your site doesn't work. Which is one of several reasons to adopt progressive enhancement, which this question does. – Michael Hampton Apr 25 at 3:04

4 Answers

up vote 2 down vote accepted

It is possible with html and css for most modern browsers using the border-radius property (not supported by internet explorer 8 and below).

css

li {-moz-border-radius: 12px 12px 0 0; /* FF1+ */
  -webkit-border-radius: 12px 12px 0 0; /* Saf3-4 */
    border-radius: 12px 12px 0 0; /* Opera 10.5, IE9, Saf5, Chrome */
    border:1px solid black;
    display:inline;
    list-style-type:none;
    padding:5px;
  }
  li:hover {background:black;}
  li a {text-decoration:none; color:black;}
  li a:hover {color:white;}

html

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

To support internet explorer you can use css3pie but you have to keep in mind that it uses javascript.

You can find more information about border-radius at: http://www.w3.org/TR/css3-background/#the-border-radius

Example: http://jsbin.com/idiza5/2

share|improve this answer
up vote 6 down vote

:target is generally the preferred way of doing tabs.

You can also be clever with input:radio, or input:checkbox elements.

http://jsfiddle.net/nzYnc/

HTML:

<label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>
    First content
</div>
<input type="radio" id="two" name="tab" />
<div>
    Second content
</div>
<input type="radio" id="three" name="tab" />
<div>
    Third content
</div>

CSS:

input
{
    position: absolute;
    right: 100%;
}

input:checked + div
{
    display: block;
}
div
{
    display: none;
}

Using the next-sibling (+) and :checked selectors in clever ways can allow you to do a pure CSS accordion, toggleable lists, or tabs like this.

share|improve this answer
up vote 2 down vote

In pure CSS3 you can use the :target selector to achieve a "tabbed interface".
Just google "tab css3 :target". Here's a tutorial about it.

share|improve this answer
up vote 1 down vote

A few days ago some link was very popular on twitter:
DEMO: http://cssglobe.com/lab/css3_tabs/01.html
TUTORIAL: http://cssglobe.com/post/9579/styling-full-width-tabs-with-css3

Hope that helps :D

EDIT: Oh, now I see it uses javascript. To make "tabs" you have to make some div (when clicked) change the CSS proprieties on another div, I don't know if you can use any kind of selectors in css3...

share|improve this answer
but it uses javascript. – Alex Feb 8 '11 at 19:30
yeah, I saw that later sory... – Cristy Feb 8 '11 at 19:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.