Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Декабрь » 4 » Горизонтальный аккордеон с JQUERY И CSS3
20:03
Горизонтальный аккордеон с JQUERY И CSS3

Горизонтальный аккордеон с JQUERY И CSS3



Сегодня мы будем создать элегантный аккордеон. Идея состоит в том, чтобы иметь несколько вертикальных вкладок  которые скользят в сторону. Мы добавим некоторые свойства 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. 

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

}

 

Примечание, тень не будет работать в IE. 
Первоначальная ширина каждого элемента будет 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;

}

 

DIV, который содержит описание будет иметь следующий стиль:

 

ul.accordion li .description{

    position:absolute;

    width:480px;

    height:175px;

    bottom:0px;

    left:0px;

    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:

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

 

Теперь, мы добавим функцию, которая  заставит элемент списка выскользнуть при наведении на него. Это будет достигнуто за счет увеличение ширины до 480 пикселей. Верхний  заголовок должен исчезать, в то время как градиент (класс CSS "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>

 

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

И вот и все! Я надеюсь, вам понравился этот урок и будет полезным!

 

ПОСМОТРЕТЬ ДЕМО                        СКАЧАТЬ ИСХОДНИКИ

 

Источник

Категория: jQuery/JS | Просмотров: 1415 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Устранение неполадок при возникновении (синего экрана) Blue Screen Of Death (BSOD) (2)
[Операционные системы]
Особенности применения технологий Lotus Domino и Notes в современных информационных системах
[Прогараммирование]
ЛЕКЦИЯ Процедуры и функции
[Прогараммирование]
ПОДПРОГРАММЫ. ПРОЦЕДУРЫ И ФУНКЦИИ
[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки
[Прогараммирование]
Файлы
[Информатика]
Кэш-память
[Информатика]
Как измеряется количество информации?

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2018Конструктор сайтов - uCoz