Горизонтальный аккордеон с 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 функция
срабатывает, когда указатель мыши перемещается над соответствующим элементом, а вторая функция срабатывает при
перемещении мыши снова. Здесь мы изменим действия, а также добавим некоторые сроки к нему, для того что бы
элементы исчезали гладко.
И вот и все! Я надеюсь, вам понравился этот урок и
будет полезным!
ПОСМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСХОДНИКИ
Источник
|
