Складывающиеся информационные блоки при помощи jQuery и CSS3

20 марта 2014 | Опубликовано в css | 4 Комментариев »

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

Демонстрация работы – Скачать исходный код

Давайте начнем с разметки.

Разметка

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

<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>

У других элементов списка будут классы bg2, bg3 и bg4. Ненумерованный список получит класс и идентификатор, так как мы хотим обращаться к нему позже в JavaScript. Конечно, нам не очень нужен класс, так как мы будем задавать стиль элементу, используя #accordion в нашей таблице стилей. Но это хороший способ разделить элементы.

CSS

Стили для списка будут выглядеть так:

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}

У элементов списка будут разные фоновые изображения, так что мы сначала определим общие свойства стилей для каждого элемента списка, а затем — фоновые изображения для каждого класса в отдельности:

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}

Заметьте, что тени блока не будут видны в старых версиях браузера Internet Explorer.

Изначальная ширина каждого элемента будет равна 115 пикселям. Мы изменим это значение в функции JavaScript, обрабатывающей наведение указателя мыши, на 480px.

Рамка, которую мы задаем каждому элементу списка, будет применяться только к одной стороне, иначе у нас получится двойная рамка между элементами и одинарная — с внешних сторон. Так что нам нужно определить класс для левой рамки, который мы применим к последнему элементу списка, так как они всплывают вправо, их порядок обратный:

ul.accordion li.bleft{
    border-left:2px solid #fff;
}

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

ul.accordion li .heading{
    background-color:#fff;
    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:14px;
    color:#444;
    text-align:center;
    text-shadow:-1px -1px 1px #ccc;
}

У блока, содержащего описание, будет такой стиль:

ul.accordion li .description{
    position:absolute;
    width:480px;
    height:175px;
    bottom:0px;
    left:0px;
    display:none;
}

Мы задаем ему свойство display:none изначально, так как мы хотим, чтобы он появлялся, только когда пользователь наводит указатель мыши. Внутренним элементам мы задаем такие стили:

ul.accordion li .description h2{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:45px;
    color:#444;
    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;
}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#888;
}
ul.accordion li .description a:hover{
    color:#333;
    text-decoration:underline;
}

Теперь нам не хватает только стилей для элемента градиента:

ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}

Изображение, которое мы повторяем, — это градиент, который идет от белого до прозрачного. Это создаст милый эффект снизу, когда будет выезжать блок.

Давайте добавим немного магии.

JavaScript

Сначала мы включим библиотеку jQuery перед концом тега body:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Теперь мы добавим функцию, которая заставит элемент списка выезжать, когда пользователь наводит на него указатель мыши. Мы добьемся этого, анимируя удлинение вкладки до 480 пикселей. После этого верхний заголовок должен плавно исчезнуть, пока градиент с классом bgDescription и описание появятся:

<script type="text/javascript">
$(function() {
    $('#accordion > li').hover(
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'480px'},500);
            $('.heading',$this).stop(true,true).fadeOut();
            $('.bgDescription',$this).stop(true,true).slideDown(500);
            $('.description',$this).stop(true,true).fadeIn();
        },
        function () {
            var $this = $(this);
            $this.stop().animate({'width':'115px'},1000);
            $('.heading',$this).stop(true,true).fadeIn();
            $('.description',$this).stop(true,true).fadeOut(500);
            $('.bgDescription',$this).stop(true,true).slideUp(700);
        }
    );
});
</script>

Первая функция в $(‘#accordion > li’).hover — это функция, которая сработает, когда мышь наедет на соответствующий элемент, а вторая функция сработает, когда мышь съедет. Здесь мы отменяем действия и настраиваем время срабатывания, чтобы элементы исчезали плавно.

И это все. Надеемся, Вам понравился этот урок, и он Вам пригодится.

Демонстрация работы – Скачать исходный код

Автор урока Mary Lou

Смотрите также:

Опубликовано в css, марта 20, 2014
Метки: css, css+jquery, Jquery, верстка, плагины jquery, урок css, урок верстка

�

Настя
21 марта 2014 в 8:44
0

Очень трудно попасть на more... Лучше вместо нее активировать всю картинку или надпись.
Денис
21 марта 2014 в 23:39
0

Не понятно, что делает метод .stop ()
Дмитрий
9 января 2015 в 20:07
0

Если ширина документа небольшая(например 925px), но достаточная для раскрытия меню, при наведении с одного элемента на другой крайние элементы переносятся на другую страницу. Поэтому лучше ставить в первой функции(на раскрытие) время 1000, а во второй 1000 заменить на 500.

Складывающиеся информационные блоки при помощи jQuery и CSS3

Разметка

CSS

JavaScript

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые