Как сделать вкладки на чистом CSS и HTML

 

Приведу интересное  решение по формированию компактного блока вкладок (табов), построенных на чистом CSS3 и использованием элементов адаптивной вёрстки. Здесь ничего лишнего и громоздкого, самый минимум кода css, и в вашем распоряжении появится адаптивный блок с переключаемыми вкладками, который отлично впишется в любой раздел страницы, будь то отдельное сообщение, боковая колонка, или же модальное окно.   

   

Код  CSS

<style>

.notebook2 {
    width: 640px;
    height: 450px;  
   position: relative;
}

.notebook2 > input {

    display: none;

}

.notebook2 > div {

    position: absolute;

    box-sizing: border-box;

    top: 30px;

    left: 0px;

    bottom: 0px;

    right: 0px;

    border-radius: 10px;

    padding: 0px 1em;

    z-index: 0;

    background-color: #666;

    transition: all 0.5s ease 0s, z-index 0s 0.5s;

}

.notebook2 > div > *:first-child {

    display: block;

    position: absolute;

    box-sizing: border-box;

    top: -30px;

    width: 150px;

    height: 30px;

    font-family: Arial;

    font-size: 13px;

    border-radius: 10px 10px 0px 0px;

    background-color: inherit;

    color: #fff;

    line-height: 28px;

    cursor: pointer;

    text-align: center;

    transition: all 0.5s ease 0s;

}

.notebook2 > div > *:not(:first-child) {

    opacity: 0;

    transition: all 0.5s ease 0s;

}

.notebook2 > div:nth-of-type(1) > *:first-child { left: 20px; }

.notebook2 > div:nth-of-type(2) > *:first-child { left: 170px; }

.notebook2 > div:nth-of-type(3) > *:first-child { left: 320px; }

.notebook2 > div:nth-of-type(4) > *:first-child { left: 470px; }

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1),

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2),

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3),

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) {

    z-index: 10;

    background-color: #ccc;

    transition: all 0.5s ease 0.5s, z-index 0s 0.5s;

}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:first-child,

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:first-child,

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:first-child,

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:first-child {

    color: #333;

    transition: all 0.5s ease 0.5s;

}

.notebook2 > input:nth-of-type(1):checked ~ div:nth-of-type(1) > *:not(:first-child),

.notebook2 > input:nth-of-type(2):checked ~ div:nth-of-type(2) > *:not(:first-child),

.notebook2 > input:nth-of-type(3):checked ~ div:nth-of-type(3) > *:not(:first-child),

.notebook2 > input:nth-of-type(4):checked ~ div:nth-of-type(4) > *:not(:first-child) {

    opacity: 1;

    transition: all 0.5s ease 0.5s;

}

</style>

 

Код HTML

<div class="notebook2">

    <input type="radio" name="notebook2a" id="notebook2a_1" checked="checked">

    <input type="radio" name="notebook2a" id="notebook2a_2">

    <input type="radio" name="notebook2a" id="notebook2a_3">

    <input type="radio" name="notebook2a" id="notebook2a_4">

    <div>

        <label for="notebook2a_1">Первая вкладка</label>

        <p>Это первая вкладка с котом.</p>

        <p><img src='https://lh3.googleusercontent.com/-6ac0fJDitng/VekGjxXrAZI/AAAAAAAAAUM/svkfw3ICSqA/s400-Ic42/1656410_6222d0c3.jpg'></p>

    </div>

    <div>

        <label for="notebook2a_2">Вторая вкладка</label>

        <p>Это вторая вкладка с лисой</p>

        <p><img src='https://lh3.googleusercontent.com/-iVaTOyL6ZNw/VekGjo3YHLI/AAAAAAAAAUQ/r-GTiK3m1wk/s400-Ic42/WL_M_F_003.jpg'></p>

    </div>

    <div>

        <label for="notebook2a_3">Третья вкладка</label>

        <p>Это третья вкладка с волком.</p>

        <p><img src='https://lh3.googleusercontent.com/-4cateiSadRE/VekGwBksb-I/AAAAAAAAAUY/4WrLlsRJPKk/s400-Ic42/wpapers_ru_%2525D0%252592%2525D0%2525BE%2525D0%2525BB%2525D0%2525BA-%2525D0%2525BD%2525D0%2525B0-%2525D1%252584%2525D0%2525BE%2525D0%2525BD%2525D0%2525B5-%2525D0%2525BD%2525D0%2525B5%2525D0%2525B1%2525D0%2525B0.jpg'></p>

    </div>

    <div>

        <label for="notebook2a_4">Четвертая вкладка</label>

        <p>Это четвёртая вкладка с рысью</p>

        <p><img src='https://lh3.googleusercontent.com/-VbI7_zCH-Eg/VekG8CK_t5I/AAAAAAAAAUg/ZuexmL-1lT8/s400-Ic42/2.jpg'></p>

    </div>

</div>

Комментарии   

0 # vikky 24.04.2017 16:50
Интересное решение по формированию блока вкладок (табов) с содержанием на чистом CSS3, с элементами адаптивной вёрстки!
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить