CSS3 Tabs with CSS3 Navigation Menu

Whenever we think about tabs, we think about JavaScript. But tabs can be created using CSS only as well. Even the transitions can be achieved using CSS. These tabs behave like general JavaScript Tabs. I am using the Navigation Menu which I created a while ago, the navigation menu gives the ability to link to specific tabs through hash tags in the URL. CSS3 Tabs with CSS3 Navigation Menu

Live Demo // Download

The Code

The CSS

body {
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    background: #545454;
    margin: 0;
    border-top: 7px solid #52a8e8;
    text-shadow: 0 0 3px rgba(0, 0, 0, 1);
    letter-spacing: 2px;
    font-size: 20px;
    background: #fff url(grain.png);
}
a {
    text-decoration: none;
    color: #fff;
}
header {
    width: 870px;
    margin-left: auto;
    margin-right: auto;
}
header nav a {
    position: relative;
    float: left;
    width: 150px;
    text-align: center;
    padding-top: 23px;
    padding-bottom: 30px;
    margin-right: 20px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    background: #52a8e8;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #4984ce));
    background: -moz-linear-gradient(center top, #52a8e8 20%, #4984ce 100%);
    background: -o-linear-gradient(#52a8e8, #4984ce);
}
header nav a:hover {
    padding-top: 53px;
    padding-bottom: 60px;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
}
h1 {
    clear: both;
    text-align: center;
    font-size: 45px;
}
blockquote {
    font: 16px normal helvetica, sans-serif;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px;
    padding-left: 15px;
    border-left: 3px solid #222;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.50);
}
.author {
    float: right;
    padding-right: 75px;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.50);
}
#box {
    margin: 150px auto;
    width: auto;
    text-align: left;
}
a {
    text-decoration: none;
}
ul {
    list-style: none;
}
#boxes {
    width: 925px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    min-height: auto;
}
.box:target,
.box:first-child {
    opacity: 1;
    -moz-opacity: 1;
}
.box {
    opacity: 0;
    -moz-opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.box:target span {
    height: auto;
    width: auto;
    background: #fff;
    display: block;
    position: absolute;
    top: -32px;
    z-index: 0;
}
.box ul,
.box p {
    line-height: 1.5em;
    padding-top: 1em;
}
#boxes a {
    color: #52a8e8;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 1);
}
.box li a {
    display: block;
    line-height: 2.2em;
    font-size: 14px;
    margin-bottom: 6px;
    padding-left: 10px;
}
#boxes ul li a:hover {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
.container {
    height: 300px;
    width: 925px;
    margin-left: auto;
    margin-right: auto;
    background: #fff url(lines.png);
    -webkit-box-shadow: #131313 0px 2px 10px;
    -moz-box-shadow: #131313 0px 3px 10px;
    box-shadow: #131313 0px 3px 10px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

The HTML

<header>
    <nav> [TAB 1][1] [TAB 2][2] [TAB 3][3] [TAB 4][4] [TAB 5][5] </nav>
</header>
<div id="box">
    <ul id="boxes">
        <li id="1" class="box">
            <div class="container">
                <h1>
                    <a href="https://priteshgupta.com/" target="_blank">Tab 1</a>
                </h1>
                <blockquote>
                    As an example to others, and not that I care for moderation myself, it has always been my rule never to smoke when asleep, and never to refrain from smoking when awake <br />
                </blockquote>
                <em class="author">~ Mark Twain</em>
            </div>
            <span></span>
        </li>
        <li id="2" class="box">
            <div class="container">
                <h1>
                    <a href="https://priteshgupta.com/" target="_blank">Tab 2</a>
                </h1>
                <blockquote>
                    Anger is an acid that can do more harm to the vessel in which it is stored than to anything on which it is poured <br />
                </blockquote>
                <em class="author">~ Mark Twain</em>
            </div>
            <span></span>
        </li>
        <li id="3" class="box">
            <div class="container">
                <h1>
                    <a href="https://priteshgupta.com/" target="_blank">Tab 3</a>
                </h1>
                <blockquote>
                    A man's character may be learned from the adjectives which he habitually uses in conversation <br />
                </blockquote>
                <em class="author">~ Mark Twain</em>
            </div>
            <span></span>
        </li>
        <li id="4" class="box">
            <div class="container">
                <h1>
                    <a href="https://priteshgupta.com/" target="_blank">Tab 4</a>
                </h1>
                <blockquote>
                    Biographies are but the clothes and buttons of the man. The biography of the man himself cannot be written <br />
                </blockquote>
                <em class="author">~ Mark Twain</em>
            </div>
            <span></span>
        </li>
        <li id="5" class="box">
            <div class="container">
                <h1>
                    <a href="https://priteshgupta.com/" target="_blank">Tab 5</a>
                </h1>
                <blockquote>
                    But who prays for Satan? Who, in eighteen centuries, has had the common humanity to pray for the one sinner that needed it most? <br />
                </blockquote>
                <em class="author">~ Mark Twain</em>
            </div>
            <span></span>
        </li>
    </ul>
</div>

Adding New Tabs

Adding new tabs is really easy, you can add as many tabs as you want, just add another hyperlink within <strong><nav></strong> with the anchor link as the hash-tag that matches the ID of the Tab. And then, to add the Tab(Content), add something like:

<li id="ID" class="box">
    <div class="container">
        <h1><a href="https://priteshgupta.com/" target="_blank">Some Heading</a></h1>
        <blockquote>Biographies are but the clothes and buttons of the man. The biography of the man himself cannot be written <br> </blockquote>
        <em class="author">~ Mark Twain</em> 
    </div>
    <span></span> 
</li>

Within <ul id="boxes">, where ‘ID’ is is the ID of the Tab.

Compatibility

For Working:

  • Firefox 3+
  • Safari 3+
  • Chrome (any)
  • Opera 10+
  • Internet Explorer 9+

For Transitions:

  • Firefox 4+
  • Safari 4+
  • Chrome 4+
  • Opera 10.5+
  • Srinivas Reddy

    Hi,

    Thanks a lot for this nice post.

    can we show active tab, with highlight?

  • Raghukoorthy

    Hi Pritesh, Great info, I was looking for some thing like this for a long time.
    cheers

  • Nice use of transitions 

  • Pingback: CSS Tabs Etcetera « WIWIWEBDEE()