Come creare un menu tabs con CSS

by Code4Life

HTML

<div class="c4l-tabs">
    <input checked="checked" id="c4l-tab-option_1" type="radio" name="c4l-tab-option" />
    <input id="c4l-tab-option_2" type="radio" name="c4l-tab-option" />
    <input id="c4l-tab-option_3" type="radio" name="c4l-tab-option" />
    <nav>
        <ul>
            <li class="c4l-tab-1">
                <label for="c4l-tab-option_1">First Tab</label>
            </li>
            <li class="c4l-tab-2">
                <label for="c4l-tab-option_2">Second Tab</label>
            </li>
            <li class="c4l-tab-3">
                <label for="c4l-tab-option_3">Third Tab</label>
            </li>
        </ul>
    </nav>
    <div class="c4l-tabs-content">
        <div class="c4l-tab-1">
            <h4>First</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate dolores velit a praesentium, totam voluptatem reprehenderit earum cumque accusamus repellendus eius officia quam in, nobis, blanditiis dolorem ducimus iure, nesciunt?</p>
        </div>
        <div class="c4l-tab-2">
            <h4>Second</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat exercitationem odit magnam suscipit libero, neque atque hic ex doloribus molestias ullam quas ipsum totam quos, illum dolorum quibusdam molestiae voluptatem!</p>
        </div>
        <div class="c4l-tab-3">
            <h4>Third</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto quae ipsa quo odio provident et, ipsum, perferendis corporis exercitationem expedita debitis quibusdam, earum, officia magnam reiciendis tenetur error id doloremque.</p>
        </div>
    </div>
</div>

<!-- Credits -->
<div class="credits">
    <a class="btn-credits" href="https://code4life.it/guide/come-creare-un-menu-tabs-con-css/" target="_blank">Vedi articolo completo</a>
</div>

CSS

/*
 * TITLE:   Come creare un menu tabs con CSS
 * AUTHOR:  Code4Life
 * WEBSITE: https://code4life.it/
 * ARTICLE: https://code4life.it/guide/come-creare-un-menu-tabs-con-css/
 */

/* Required snippet style */
.c4l-tabs > input,
.c4l-tabs .c4l-tabs-content > div {
    display: none;
}

#c4l-tab-option_1:checked ~ .c4l-tabs-content .c4l-tab-1,
#c4l-tab-option_2:checked ~ .c4l-tabs-content .c4l-tab-2,
#c4l-tab-option_3:checked ~ .c4l-tabs-content .c4l-tab-3 {
    display: block;
}

.c4l-tabs {
    margin: 0 auto;
    width: 100%;
}
.c4l-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.c4l-tabs ul li label {
    background-color: #eeeeee;
    border: 1px solid #dddddd;
    border-bottom: 0;
    color: #333333;
    float: left;
    padding: 10px 20px;
}
.c4l-tabs ul li label:hover {
    background-color: #dddddd;
}
.c4l-tabs ul li label:active {
    background-color: #ffffff;
}
.c4l-tabs ul li:not(:last-child) label {
    border-right-width: 0;
}
.c4l-tabs .c4l-tabs-content {
    clear: both;
}
.c4l-tabs .c4l-tabs-content > div {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333333;
    line-height: 1.3em;
    padding: 15px;
    width: 100%;
}

#c4l-tab-option_1:checked ~ nav .c4l-tab-1 label,
#c4l-tab-option_2:checked ~ nav .c4l-tab-2 label,
#c4l-tab-option_3:checked ~ nav .c4l-tab-3 label {
    background-color: #ffffff;
    color: #333333;
    position: relative;
}
#c4l-tab-option_1:checked ~ nav .c4l-tab-1 label::after,
#c4l-tab-option_2:checked ~ nav .c4l-tab-2 label::after,
#c4l-tab-option_3:checked ~ nav .c4l-tab-3 label::after {
    background-color: #ffffff;
    bottom: -1px;
    content: '';
    display: block;
    left: 0;
    height: 2px;
    position: absolute;
    width: 100%;
}

/* Demo style only */
.demo-content { margin-bottom: 70px; text-align: center; }

/* Credits */
@import url( 'https://fonts.googleapis.com/css?family=Roboto:300' );
.credits { background: #F3F5F6; border: solid 1px #CFD6D9; bottom: 40px;...