Tabbed Navigation

I'm having real difficulty figuring how to do the following: I want to have two tabs (horizontal next to each other), one for search (and labelled as such) and another for post (la

Solution 1:

This is how you do it with the :target pseudo class

FIDDLE

Markup

<divid="navigation"><ulclass="nav"><liclass="first-selected"><ahref="#Search">Search</a></li><liclass="second-selected"><ahref="#Post">Post</a></li></ul></div><divid="Post"class="post"><p><formmethod="post"action="twocents.html"><labelfor="Search"></label><inputtype="text"name="Post"id="Post"/><inputtype="submit"value="Post"/></p></div><divid="Search"class="search"><p><formmethod="post"action="twocents.html"><labelfor="Search"></label><inputtype="text"name="Search"id="Search"/><inputtype="submit"value="Search"/></p></div>

CSS

li
{
    display: inline-block;
}
.search
{
    display: block;
}
.post
{
    display:none;
}
.post:target
{
    display: block;
}

.post:target + .search
{
    display: none;
}

Solution 2:

There is another way to this with pure css. The difficulty lies in preserving the 'active' state of a tab, and this can be done by using a radio input on the tab button. It is a bit hackish, but it works fine

The html would look something like this:

<ulclass="tabs"><liclass="tabs-page"><inputtype='radio'name='tab'id='tab-search'checked/><labelfor='tab-search'>Search</label><divclass="content"><h2>The search page</h2></div></li><liclass="tabs-page"><inputtype='radio'name='tab'id='tab-post' /><labelfor='tab-post'>Post</label><divclass="content"><h2>The post page</h2></div></li></ul>

Notice the inputs and labels that will serve as buttons. (also note that I corrected your markup, you can only use li as direct child of an ul!!)

The css would look something like this:

input[name='tab'] {
    display: none;
}
input[name='tab'] ~ .content {
    display: none;
}
input[name='tab']:checked ~ .content {
    display: block;
}

By making combining the :checked selector (to detect the state of the 'tab button') and the sibling ~ selector, you can determine which tab page should be displayed.

I set up a small example for you as well: http://jsfiddle.net/j9YbW/

Solution 3:

Sorry about my previous post. I have modifed Danield's tabbed view a little bit and now its scalable and more reliable.

Thanx Danield.

    li {
                display: inline-block;
                margin-right: 10px;
                list-style: none;
            }

            .frame {
                display: none;
            }

                .frame:target {
                    display: block;
                }





    /// Markup


    <divid="navigation"><ulclass="nav"><li><ahref="#tab1">Tab1</a></li><li><ahref="#tab2">Tab2</a></li><li><ahref="#tab3">Tab3</a></li><li><ahref="#tab4">Tab4</a></li></ul></div><divid="tab1"class="frame"><p>
                    Tab 1
                </p></div><divid="tab2"class="frame"><p>
                    Tab 2
                </p></div><divid="tab3"class="frame"><p>
                    Tab 3
                </p></div><divid="tab4"class="frame"><p>
                    Tab 4
                </p></div>

Solution 4:

This is the best you could do with pure css.

///Markup<ulclass="tabs"><litabindex="1"><a>Search</a><divclass="tab-content">Search :<inputtype="text"/></div></li><litabindex="1"><a>Post</a><divclass="tab-content">Post:<inputtype="text"/></div></li></ul>///CSShtml,body {
  height:100%;width:100%;margin:0;overflow:hidden;
}
ul.tabsli {
  float:left;margin:20px05px10px;list-style:none;width:100px;
}
ul.tabslia {
  display:block;background-color:#ccc;padding:5px10px;cursor:pointer;text-align:center;
}
ul.tabslia:hover {
  background-color:#7cc6fb;
}
ul.tabsli:focus {
  outline:none;
}
ul.tabsli:focus>a {
  background-color:#0094ff;
}
ul.tabsli:focus.tab-content {
  z-index:100;
}
ul.tabsli.tab-content {
  position:absolute;left:20px;top:70px;right:20px;bottom:20px;z-index:10;padding:50px;background-color:#fff;border:1pxsolid#999;
}