Главная » 2013 » Сентябрь » 30 » Accordion на CSS3 (Скрипты для ucoz)
30.09.2013, 13:50

Accordion на CSS3



Самое простой Accordion для сайта, работает на свойствах CSS3. Настраивается всё!!! Accordion может содержать заголовок с ссылкой или быть без неё на Ваше усмотрение. Удачи в установке и использовании!

Установите там где хотите видеть Accordion:

Код
<style>
[id="accordion"] > [class="accordion"] {
width: 300px;
height: 30px;
overflow: hidden;
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border: 1px solid #ccc;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 2px;
}
#accordion h3 {
display: block;
height: 30px;
line-height: 20px;
margin: 0px 0px 5px 0px;
background: #e6e6e6;
padding: 5px;
}
#accordion h3 > a {
color: #1e1e1e;
text-decoration: none;
}
#accordion p {
height: 150px;
padding: 5px;
}
#accordion li {
list-style:none;
float:left;
}
#accordion li a {
padding: 5px;
color:3D3D3D;
text-decoration:none !important;
}
#accordion li a:hover:before {
content: "►";
padding-right:5px;
color:red;
}
#accordion div:hover {height: 180px;}
#accordion div:hover h3 {
border-bottom: 1px solid #ccc;
font-weight: bold;
}
</style>
<div id="accordion">
<div class="accordion">
<h3><a href="#">Аккордион</a></h3>
<p>Меню <span style="color:red;">accordion</span> для сайта. Облегчённый вариант с эффектом замедленного раскрытия.</p>
</div>
<div class="accordion">
<h3>Настройки Accordion</h3>
<p>В меню регулируется всё, цвета, размеры и время замедления при открытии. Можно использовать заголовок как ссылку для перехода, можно без ссылки.</p>
</div>
<div class="accordion">
<h3>Применение Accordion</h3>
<p>Применяться может для чего угодно, даже как вид материалов сайта uCoz, тогда здесь будет краткое описание.</p>
</div>
<div class="accordion"><h3>Ссылки Accordion</h3>
<li>
<a href="//cs-unity3d.ucoz.ru/">
Counter Strike 1.6 ® Unity 3D
</a>
</li>
<li>
<a href="//cs-unity3d.ucoz.ru/#tab2">
Counter Strike 1.6 Portable Unity 3D
</a>
</li>
<li>
<a href="//cs-unity3d.ucoz.ru/#tab3">
Counter Strike 1.6 Unity 3D
</a>
</li>
<li>
<a href="#">Меню Аккордион</a>
</li>
</div>
</div>
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: IZOTOP
Категория: Скрипты uCoz | Просмотров: 1054 | Добавил: hoster-saitov | Рейтинг: 0.0/0 |
Теги: For, Accordion, аккордион, css3
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]