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

<div id="navigation">
  <ul class="nav"> 
   <li class="first-selected"><a href="#Search">Search</a></li>
   <li class="second-selected"><a href="#Post">Post</a></li> 
   </ul>  
</div>

<div id="Post" class="post"> 
 <p><form method="post" action="twocents.html">
 <label for="Search"></label>
 <input type="text" name="Post" id="Post"/>
 <input type="submit" value="Post"/></p>
</div>

<div id="Search" class="search">
    <p><form method="post" action="twocents.html">
    <label for="Search"></label>
    <input type="text" name="Search" id="Search"/>
    <input type="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:

<ul class="tabs">
    <li class="tabs-page">
        <input type='radio' name='tab' id='tab-search' checked/>
        <label for='tab-search'>Search</label>
        <div class="content">
            <h2>The search page</h2>
        </div>
    </li>
    <li class="tabs-page">
        <input type='radio' name='tab' id='tab-post' />
        <label for='tab-post'>Post</label>
        <div class="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


    <div id="navigation">
            <ul class="nav">
                <li><a href="#tab1">Tab1</a></li>
                <li><a href="#tab2">Tab2</a></li>
                <li><a href="#tab3">Tab3</a></li>
                <li><a href="#tab4">Tab4</a></li>
            </ul>
        </div>

            <div id="tab1" class="frame">
                <p>
                    Tab 1
                </p>
            </div>

            <div id="tab2" class="frame">
                <p>
                    Tab 2
                </p>
            </div>

            <div id="tab3" class="frame">
                <p>
                    Tab 3
                </p>
            </div>

            <div id="tab4" class="frame">
                <p>
                    Tab 4
                </p>
            </div>

Solution 4:

This is the best you could do with pure css.

/// Markup

<ul class="tabs">
        <li tabindex="1">
            <a>Search</a>
            <div class="tab-content">
                Search : <input type="text" />
            </div> 
        </li>
        <li tabindex="1">
            <a>Post</a>
            <div class="tab-content">
                Post: <input type="text" />
            </div> 
        </li>
    </ul>


/// CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
ul.tabs li {
  float: left;
  margin: 20px 0 5px 10px;
  list-style: none;
  width: 100px;
}
ul.tabs li a {
  display: block;
  background-color: #ccc;
  padding: 5px 10px;
  cursor: pointer;
  text-align: center;
}
ul.tabs li a:hover {
  background-color: #7cc6fb;
}
ul.tabs li:focus {
  outline: none;
}
ul.tabs li:focus > a {
  background-color: #0094ff;
}
ul.tabs li:focus .tab-content {
  z-index: 100;
}
ul.tabs li .tab-content {
  position: absolute;
  left: 20px;
  top: 70px;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  padding: 50px;
  background-color: #fff;
  border: 1px solid #999;
}