Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



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


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

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


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

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

 

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

 

Источник

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

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди