суббота, 16 августа 2014 г.

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

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

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

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

Вкладка 1

Вкладка 2

Вкладка 3

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

Анонимный

Очень помогло. Написано очень понятно, схватывается на лету. Автору спасибо!

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