Горизонтальный аккордеон на JQuery.
После публикации статьи 5 способов создать вертикальный аккордеон решил поискать способ создания горизонтального аккордиона. И нашел довольно простой способ здесь. Аккордеон создан с использованием JQuery. Единственным недостатком было использование графических элементов для секций аккордеона. Немного изменил код, тем более, что CSS3 позволяет создать вертикальный текст.
Итак, создаем простую основу html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="container">
<ul id="accordion">
<li>
<div class="column1">
<p class="css-vertical-text">Раздел 1</p>
</div>
<div class="column2">
<strong>Заголовок 1</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</li>
<li>
<div class="column1">
<p class="css-vertical-text">Раздел 2</p>
</div>
<div class="column2">
<strong>Заголовок 2</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</li>
<li>
<div class="column1">
<p class="css-vertical-text">Раздел 3</p>
</div>
<div class="column2">
<strong>Заголовок 3</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</li>
<li>
<div class="column1">
<p class="css-vertical-text">Раздел 4</p>
</div>
<div class="column2">
<strong>Заголовок 4</strong><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
</div>
</li>
</ul>
</div>
</body>
</html>
Подключаем JQuery и добавляем простой JavaScript код:
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script>
$(document).ready(function(){
activeItem = $("#accordion li:first");
$(activeItem).addClass('active');
$("#accordion li").hover(function(){
$(activeItem).animate({width: "50px"}, {duration:300, queue:false});
$(this).animate({width: "450px"}, {duration:300, queue:false});
activeItem = this;
});
});
</script>
Добавляем стили для элементов:
<style>
body {
font: 13px Arial, Helvetica, sans-serif;
color: #1e1e1e;
}
#container {
width: 610px;
}
#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 200px;
overflow: hidden;
background: #7d8d96;}
#accordion li {
float: left;
border-left:
display: block;
height: 170px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px solid #fff;}
#accordion li.active {
width: 450px;
}
p.css-vertical-text {
color:#333;
border:0px solid red;
writing-mode:tb-rl;
-webkit-transform:rotate(270deg);
-moz-transform:rotate(270deg);
-o-transform: rotate(270deg);
white-space:nowrap;
display:block;
bottom: 0;
margin:0;
width:130px;
height:110px;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:24px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
text-align: left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.column1 {
float: left;
width: 50px;
height: 190px;
.column2 {
float: right;
width: 400px;
height: 170px;
}
</style>
Здесь стиль параграфа позволяет создать вертикальный текст раздела.
Строки
-webkit-transform:rotate(270deg); -moz-transform:rotate(270deg); -o-transform: rotate(270deg);
разворачивают текст параграфа на 270 градусов.
Строка
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
добавлена для получения нужного эффекта в IE.
Пример горизонтального аккордеона смотрим здесь.
Похожие сообщения:
просмотров:2 121
