How to make tabs in CSS. Tabs for website

Hello, glad you are here. I am kunaal and today we will make tabs for website with CSS and JS. You can see demo below.

Demo

Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Make three files index.html, style.css and app.js. Write basic HTML structure and link stylesheet.

After that inside body tag write this.

<div class="tabs">
        <span class="active"></span>
        <p class="tab">01</p>
        <p class="tab">02</p>
        <p class="tab">03</p>
        <p class="tab">04</p>
        <p class="tab">05</p>
    </div>

    <div class="content">
        <div class="page">
            <h1 class="title">tabs in css</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">tabs 2</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">tabs 3</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">tabs 4</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
        <div class="page">
            <h1 class="title">like, share, subscribe</h1>
            <hr>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, blanditiis. Eos suscipit dolorum consequuntur voluptatem veritatis reiciendis atque harum deleniti soluta, reprehenderit quos odit obcaecati sit, nulla eum, dolores sed hic exercitationem dicta qui laboriosam quisquam maxime! Aliquid ut reprehenderit quisquam vel ipsam quam architecto ad sunt, alias similique quod nesciunt modi non voluptatum soluta maiores hic debitis dolore quibusdam minus porro. Ex quae veritatis dignissimos reprehenderit voluptates fuga, minus voluptate repellendus facere doloremque doloribus, nisi quod soluta accusamus deleniti, delectus voluptas officia saepe dolore in. Sapiente ratione totam minima quam perferendis praesentium ad doloribus reiciendis. Blanditiis debitis eligendi officia amet accusantium sed pariatur quae rerum facere, repudiandae tempora distinctio aperiam cum itaque deserunt temporibus totam ducimus laudantium quia! Quasi ut perferendis aut provident harum in rerum praesentium consectetur! Ullam ex sit itaque nobis deserunt repellat delectus, voluptas in, distinctio neque molestias quibusdam, pariatur animi nam. Fugiat fuga aut hic sequi provident blanditiis, nesciunt, cumque harum ullam voluptas veniam magni? Et laboriosam voluptatum sapiente perspiciatis, culpa molestias commodi, architecto iure libero inventore voluptatibus non ut delectus fuga? Explicabo officiis excepturi totam distinctio quae, itaque veniam perferendis voluptatibus minima, natus quidem soluta pariatur ipsam iure, esse dolores ab reprehenderit laudantium harum?</p>
        </div>
    </div>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    font-family: 'roboto', sans-serif;
    overflow: hidden;
}

.tabs{
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    background: #232323;
    justify-content: center;
    align-items: center;
}

.tab{
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: #b9b9b9;
    transition: .5s;
}

.tab:hover{
    background: #373737;
}

.tabs .active{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 60px;
    width: 20%;
    border-bottom: 4px solid #fff;
    transition: 1s;
}

.content{
    position: relative;
    width: 500vw;
    min-height: calc(100vh - 60px);
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(5, 100vw);
    transition: .5s;
}

.page{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img1.jpeg);
    background-size: cover;
    background-position: center;
    padding: 50px;
}

.page:nth-child(2){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img2.jpeg);
    background-size: cover;
}

.page:nth-child(3){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img3.jpeg);
    background-size: cover;
}

.page:nth-child(4){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img4.jpeg);
    background-size: cover;
}

.page:nth-child(5){
    background: url(https://raw.githubusercontent.com/kunaal438/tabs-in-css/master/img/img5.jpeg);
    background-size: cover;
}

.page::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #232323;
    opacity: .8;
}

.page .title,
.page hr,
.page p{
    position: relative;
    z-index: 2;
}

.title{
    color: #fff;
    text-transform: capitalize;
    font-size: 50px;
}

hr{
    margin: 20px 0;
}

.page p{
    color: #fff;
    font-weight: 300;
    margin-top: 40px;
    line-height: 25px;
}

And some little JS.

const tabs = [...document.querySelectorAll('.tab')];
const pageContainer = document.querySelector('.content');
const activeSpan = document.querySelector('.tabs .active');

tabs.forEach((item, i) => {
    item.addEventListener('click', () => {
        pageContainer.style.marginLeft = `-${i * 100}%`;
        activeSpan.style.left = `${i * 20}%`;
    })
})

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Souce Code, My youtube Channel, Instagram

Comments

[Alvaro Montoro]

This implementation has a nice a pretty design and the animation is slick, but it has some important issues that should be addressed. These issues make the whole tab component non-accessible and unusable for many people.

Probably, the top issue is that the tabs are paragraphs but they should be buttons (or maybe even anchors). Because a <p> is not an interactive element, it doesn't get focus. Keyboard-users are then unable to interact with the tabs and change the active panel. Also, the tabs cannot be activated from screen readers either.

Also, a tab panel is one of the components that cannot be done semantically with HTML "out of the box." It will work, but it can be made more accessible using aria-attributes to help identify the different parts of the component. The W3C has an example with a suggested way of adding these aria-attributes and roles.

Because of how the content is organized and displayed, screen reader users will have to go through all the tabs before reaching the content after them (and depending on the content of the tabs, keyboard-users may have the same issue.) This can be a little bit trickier to implement and resolve considering the animation, but it should be possible.

Accessibility aside (although related to it), there's one more thing: the use of the proper semantic HTML is important. H1 is the main page header and a general recommendation is to limit it to only one per page (not always), there is an <h1> in each tab panel, which can be confusing. It would probably be better if they were <h2>. Also, the <hr> has some semantic value that makes it not needed between header and content, it would be better to have a bottom border/shadow in the header instead.

Apart from that, the article is good and the component looks amazing. Looking forward to reading more from you.