Creating Tabbed Navigation with CSS - A Step-by-Step Guide

Question

Creating Tabbed Navigation with CSS - A Step-by-Step Guide

I am looking to create tab contents using CSS. I have managed to create a custom tab style, but I am struggling to style its content with CSS. Can anyone provide guidance on how I can achieve this?

CSS:

.tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.tabs li {
    margin: 0 2px;
    padding: 10px;
    cursor: pointer;
    background: white;
    display: inline-block;
}
.tabs li:not(.active):hover
{
    background: #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.tabs li > a
{   
    text-decoration: none;
    color: gray
}
.tabs li.active
{
    z-index: 1000;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border: 1px solid #ccc;
    border-bottom-color: #fff;
    color: grey;
    cursor: default;
}
.tabs:after
{
    position: absolute;
    content: "";
    width: 100%;
    z-index: 1;
    bottom: 0;
    left:0;
    border-bottom: 1px solid #ddd;
}
.tabs:before
{
    z-index: 1;
}

HTML:

<ul class="tabs">
            <li class="active"><a href="#tab1">Home</a></li>
            <li><a href="#tab2">Contact</a></li>
            <li><a href="#tab3">Services</a></li>
        </ul>

Fiddle

html css

Answer 1

Answer №1

Here's what you need:

body {
margin: 0;
background-color: #5E6EBF;
}
.tab-menu {
margin: 20px auto;
padding: 0 76px;
}
.tabs {
width: 150px;
display: inline-block;
position: relative;
height: 45px;
}
.tab-content {
display: none;
}
.tabs input {
margin: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
opacity: 0;
}
.tabs label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
text-align: center;
line-height: 40px;
transition: all 0.3s ease;
background-color: #ffffff;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.tab-content p {
line-height: 29px;
font-style: italic;
}
.tabs input:checked + label {
background-color: #4B5898;
color: #ffffff;
font-weight: 600;
}
.tabs input:checked ~ .tab-content {
display: block;
position: fixed;
top: 65px;
width: 1200px;
padding: 10px;
box-sizing: border-box;
margin: 0 auto;
left: 76px;
background-color: #4B5898;
color: #ffffff;
}
@media screen and (max-width:1300px){
.tabs input:checked ~ .tab-content {
max-width: 800px;
}
}
@media screen and (max-width: 991px){
.tabs input:checked ~ .tab-content {
max-width: 500px;
}
}

@media screen and (max-width: 650px){
.tab-menu {
padding: 0 10px;
}
.tabs input:checked ~ .tab-content {
left: 10px;
}
}

@media screen and (max-width: 525px){
.tabs {
width: 80px;
height: 40px;
}
.tabs input:checked ~ .tab-content {
left: 10px;
top: 60px;
max-width: 270px;
}
}

<div class="tabs-container">
<div class="tab-menu">
<div class="tabs">
<input type="radio" name="myradio" checked>
<label>TAB1</label>
</input>
<div class="tab-content">
<h3>One Content</h3>
<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publ</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="myradio">
<label>TAB2</label>
</input>
<div class="tab-content">
<h3>Two Content</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="myradio">
<label>TAB3</label>
</input>
<div class="tab-content">
<h3>Three Content</h3>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,</p>
</div>
</div>
</div>
</div>

https://codepen.io/Vikaspatel/pen/zMNZWv

Answer 2

Here's what you need:

body {
margin: 0;
background-color: #5E6EBF;
}
.tab-menu {
margin: 20px auto;
padding: 0 76px;
}
.tabs {
width: 150px;
display: inline-block;
position: relative;
height: 45px;
}
.tab-content {
display: none;
}
.tabs input {
margin: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
cursor: pointer;
opacity: 0;
}
.tabs label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
text-align: center;
line-height: 40px;
transition: all 0.3s ease;
background-color: #ffffff;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.tab-content p {
line-height: 29px;
font-style: italic;
}
.tabs input:checked + label {
background-color: #4B5898;
color: #ffffff;
font-weight: 600;
}
.tabs input:checked ~ .tab-content {
display: block;
position: fixed;
top: 65px;
width: 1200px;
padding: 10px;
box-sizing: border-box;
margin: 0 auto;
left: 76px;
background-color: #4B5898;
color: #ffffff;
}
@media screen and (max-width:1300px){
.tabs input:checked ~ .tab-content {
max-width: 800px;
}
}
@media screen and (max-width: 991px){
.tabs input:checked ~ .tab-content {
max-width: 500px;
}
}

@media screen and (max-width: 650px){
.tab-menu {
padding: 0 10px;
}
.tabs input:checked ~ .tab-content {
left: 10px;
}
}

@media screen and (max-width: 525px){
.tabs {
width: 80px;
height: 40px;
}
.tabs input:checked ~ .tab-content {
left: 10px;
top: 60px;
max-width: 270px;
}
}

<div class="tabs-container">
<div class="tab-menu">
<div class="tabs">
<input type="radio" name="myradio" checked>
<label>TAB1</label>
</input>
<div class="tab-content">
<h3>One Content</h3>
<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publ</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="myradio">
<label>TAB2</label>
</input>
<div class="tab-content">
<h3>Two Content</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
</div>
</div>
<div class="tabs">
<input type="radio" name="myradio">
<label>TAB3</label>
</input>
<div class="tab-content">
<h3>Three Content</h3>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,</p>
</div>
</div>
</div>
</div>

https://codepen.io/Vikaspatel/pen/zMNZWv

Answer 3

Answer №2

Implementing a "pure CSS" tab control can be done in various ways. I took inspiration from this sample and made modifications to the HTML structure in your JSFiddle to incorporate <div> content inside <li> elements. I then applied some styling to hide inactive tabs.

/* Specific CSS for tab content */
.tabs li div {
    display: none;
}

/* Specific CSS for active tab */
.tabs li.active div {
    display: block;
    position:absolute;
    left:0px;
}

In addition, I updated the header links from <a> to radio inputs to ensure only one tab is active at a time in "pure CSS". This change required adjusting the active tab's content CSS selector to:

.tabs input[name=tabs]:checked ~ div

This selects divs that are siblings of input tags named tabs which are checked.

Your initial implementation was close, but the key point to remember is that maintaining state in pure CSS necessitates the use of radio or checkbox inputs.

Cheers! :-)

Answer 4

Implementing a "pure CSS" tab control can be done in various ways. I took inspiration from this sample and made modifications to the HTML structure in your JSFiddle to incorporate <div> content inside <li> elements. I then applied some styling to hide inactive tabs.

/* Specific CSS for tab content */
.tabs li div {
    display: none;
}

/* Specific CSS for active tab */
.tabs li.active div {
    display: block;
    position:absolute;
    left:0px;
}

In addition, I updated the header links from <a> to radio inputs to ensure only one tab is active at a time in "pure CSS". This change required adjusting the active tab's content CSS selector to:

.tabs input[name=tabs]:checked ~ div

This selects divs that are siblings of input tags named tabs which are checked.

Your initial implementation was close, but the key point to remember is that maintaining state in pure CSS necessitates the use of radio or checkbox inputs.

Cheers! :-)

Creating Tabbed Navigation with CSS - A Step-by-Step Guide

Fiddle

Answer №1

Answer №2

Similar questions

Create styles for each component based on their specific props when designing a customized Material-UI theme

Recording Node pathways that begin with the hash symbol #

The Vue Swiper does not support inline containers in my code

Using Jquery for a Second Timer

Content towering over the footer

Exploring Ways to Utilize Multiple Access Levels with PHP and MySQL

Preventing box shadows from blending together

A Step-by-Step Guide to Downloading Images by Clicking

Monitoring user logins based on user identification

Can a font size be adjusted dynamically based on the width of its containing class?

Implement a smooth transition effect when changing the image source

A guide to implementing hover and mouse click effects on ImageList using Material UI version 5.11.11

Utilizing JavaScript to dynamically resize an element within a slide as soon as the slider transitions to the following slide

What is the most effective method for generating dial images through programming?

One cool CSS trick: altering a div's background color with hover!

Centered vertically on the right side of a div, a CSS arrow is positioned

Effective URL structure with nested ui-view in AngularJS

Help with guiding and redirecting links

Organize a list using custom span values with JavaScript

"Styling a form input with YAML and implementing a jQuery date picker field