наверх





Создать блок меню для сайта? Слишком легко и просто. Давайте сделаем так, чтобы информация в блоке открывалась при клике на верхушку блока, ведь это и выглядеть будет лучше, да и поинтереснее будет.


К примеру, у нас есть блок меню на сайте. Чтобы его как-нибудь оживить, его можно немного приукрасить, сделав так, чтобы пункты меню выезжали из под названия меню, при клике на него. Делается это, на самом деле, очень просто, используя псевдокласс :target.

Давайте сделаем эти самые блоки меню, в вертикальном виде.

HTML


<div class="blocks">
       <div class="blockLink"><a href="#tab1">Название блока</a></div>
    <a class="tabs" id="tab1"></a>
        <div class="tab">
        Текст
        </div>    
        <br>
    <div class="blockLink"><a href="#tab4">Название блока</a></div>
    <a class="tabs" id="tab4"></a>
        <div class="tab">
        Текст
        </div>
            <br>
    <div class="blockLink"><a href="#tab2">Название блока</a></div>
    <a class="tabs" id="tab2"></a>
        <div class="tab">
        Текст
        </div>
               <br>
    <div class="blockLink"><a href="#tab3">Название блока</a>    </div>
    <a class="tabs" id="tab3"></a>
        <div class="tab">
        Текст
        </div>
</div>


Как видите, все просто. Для того, чтобы выскальзывала информация, мы будем использовать якоря.

CSS



Сначала необходимо добавить стилей к самому тексту, а так же к классу tab:

.tabs {
    opacity: 0;  /* Прозрачность */
    visibility: hidden; /* Изначально - спрятан */
}

.tab{
    visibility: hidden;    /* Изначально - спрятан */
    z-index: 10;    /* z-index */
    color:#fff; /* Цвет */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    margin-top:-30px; /* Отступы */
    padding:5px; /* Внутренние отступы */
    width:200px; /* Ширина */
    position:absolute; /* Позиционирование */
    
    /* transition старт */
    -webkit-transition:All 1s ease;
    -moz-transition:All 1s ease;
    -o-transition:All 1s ease;
    /* transition конец */
    
    /* Округление старт */
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* Округление конец */
}


То есть, как видите, для того, чтобы придать эффект выскальзывания сверху, мы сначала смещаем наш текст на определенное количество пикселей вверх. Так же можно его и сместить вправо. влево, вниз и уже придать эффект выскальзывания с другой стороны. Так же, мы задали свойство position со значением absolute, чтобы изначально наш текст не занимал места, то есть не было пространство под заголовком блока.

Далее, необходимо сделать так, чтобы текст стал видимым при клике на заголовок:

.tabs:target+.tab {
    opacity: 1; /* Убирает прозрачность */
    visibility: visible; /* Делает видимым */
    margin-top:0px; /* Отступы */
    background-color:#478CFB; /* Фон */
    color:#fff; /* Цвет текста */
    position:relative; /* Позиционирование */
    border:1px solid #337EFB; /* Граница */
}


Получается, что посетитель, нажав на заголовок, видит, как сверху выскальзывает текст и располагается под заголовком, ведь выше мы задали свойство margin-top, со значением 0 пикселей, а так же position, со значением relative, чтобы текст не въехал на нижние заголовки, а занял свое пространство.

Наши блоки почти готовы, осталось украсить лишь сами заголовки.

.blockLink{
    background-color:#E6E6E6; /* Цвет */
    border:1px solid #D5D5D5; /* Граница */
    padding:5px; /* Внутренние отступы */
    width:200px; /* Ширина */
    
    /* Округление старт */
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* Округление конец */
}
.blockLink a{
    padding:5px; /* Внутренние отступы */
    font: bold 12pt "Trebuchet MS", tahoma, verdana, arial narrow, arial; /* Толщина, размер и семейство шрифта */
    color:#A4A5A4; /* Цвет */
    text-decoration:none; /* Отсутствие нижней линии */
    display:block; /* Тип оттображения */
}


Вот и все.

С видом таблицы тоже нечего сложного. Просто немного изменяется HTML разметка, а так же в стилях добавляется новый параметр:

.blocks td {
    vertical-align:top;
}





Просмотр демо-варианта


Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.