Верстаем панель вкладок для сайта. Часть 4.

В предыдущей статье мы смогли создать красивую и технологичную панель вкладок с использованием :target и даже сделали приятную анимацию переключения вкладок. Однако панель вкладок получилась фиксированного размера. Можно ли её переверстать так, чтобы высота панели менялась в зависимости от содержимого вкладок?

Можно. Ценой этому является отказ от плавного переключения вкладок. Мы используем традиционный подход с переключением режима display none — display block и скрестим его с селекторами :target.

Не буду долго объяснять, как устроен код этого примера, ведь если вы разобрались с тем, как работают примеры из предыдущей статьи, вам уже любой CSS по плечу. Сразу покажу, что у меня получилось:

Содержимое второй вкладки

Бла бла бла...

Содержимое третьей вкладки

Бла бла бла...

Исходный код:

<style>
    .notebookC {
        position: relative;
        min-width: 500px;
        width: 85%;
        margin: 2em auto;
        padding-bottom: 30px;
    }

    .notebookC > span {
        display: none;
    }

    .notebookC > h3 {
        position: absolute;
        margin: 0px;
        padding: 0px;
        top: 0px;
        height: 30px;
        width: 120px;
        border-radius: 5px 5px 0px 0px;
        background-color: inherit;
        text-align: center;
        font-size: 13px;
        color: #777;
        line-height: 30px;
        font-weight: normal;
    }

    .notebookC > h3 a {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .notebookC > h3:nth-of-type(1) { left: 10px; }
    .notebookC > h3:nth-of-type(2) { left: 135px; }
    .notebookC > h3:nth-of-type(3) { left: 260px; }

    .notebookC > h3,
    .notebookC > span:not(:nth-of-type(1)):target ~ h3:nth-of-type(1) {
        background-color: #ddd;
    }

    .notebookC > span:nth-of-type(1):target ~ h3:nth-of-type(1),
    .notebookC > span:nth-of-type(2):target ~ h3:nth-of-type(2),
    .notebookC > span:nth-of-type(3):target ~ h3:nth-of-type(3),
    .notebookC > h3:nth-of-type(1) {
        background-color: #fff;
    }


    .notebookC > div {
        position: relative;
        top: 30px;
        border-radius: 5px;
        box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
        width: 100%;
        padding: 1px 20px;
    }

    .notebookC > div,
    .notebookC > span:not(:nth-of-type(1)):target ~ div:nth-of-type(1) {
        background-color: #ddd;
        display: none;
    }

    .notebookC > span:nth-of-type(1):target ~ div:nth-of-type(1),
    .notebookC > span:nth-of-type(2):target ~ div:nth-of-type(2),
    .notebookC > span:nth-of-type(3):target ~ div:nth-of-type(3),
    .notebookC > div:nth-of-type(1) {
        background-color: #fff;
        display: block;
    }
</style>

<div style='background-color: #c0cfff; padding: 30px;'>
<div class='notebookC'>
    <span id='tabX1-1'></span>
    <span id='tabX1-2'></span>
    <span id='tabX1-3'></span>

    <h3><a href="#tabX1-1">Вкладка 1</a></h3>
    <h3><a href="#tabX1-2">Вкладка 2</a></h3>
    <h3><a href="#tabX1-3">Вкладка 3</a></h3>

    <div>
        <p>Содержимое первой вкладки</p>
        <p>Бла бла бла...</p>
        <p><img src='https://lh3.googleusercontent.com/-XGgw41OSARk/VePicTdAdgI/AAAAAAAAAS4/WeBbxp4ebQg/s400-Ic42/00099_manaisland_1920x1200.jpg' alt=''></p>
    </div>

    <div>
        <p>Содержимое второй вкладки</p>
        <p>Бла бла бла...</p>
        <p>Бла бла бла...</p>
        <p><img src='https://lh3.googleusercontent.com/-aafAKIoTkT4/VePihWk2BHI/AAAAAAAAATA/zQVtiYD_eDc/s400-Ic42/00201_lakejipe_1920x1200.jpg' alt=''></p>
    </div>

    <div>
        <p>Содержимое третьей вкладки</p>
        <p>Бла бла бла...</p>
        <p>Бла бла бла...</p>
        <p>Бла бла бла...</p>
        <p><img src='https://lh3.googleusercontent.com/-BLXeHJNyOqw/VePimp_e_wI/AAAAAAAAATQ/BVw_9LFehyU/s400-Ic42/00442_pyrenees_1920x1200.jpg' alt=''></p>
        <p>Бла бла бла...</p>
        <p>Бла бла бла...</p>
    </div>
</div>
</div>

[вёрстка] Верстаем панель вкладок для сайта. Часть 4.

Вкладка 1

Вкладка 2

Вкладка 3

1 комментарий

Отправить комментарий