Accordion - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Контейнер для контента » Accordion

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Accordion




Самое простой 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>



Accordion в подключенном виде



Проверьте код Accordion в редакторе









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 1496 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: for, Accordion, аккордион, site, CSS3, для, сайта, code

    Всего комментариев: 2
    0   Спам
    2 vasja59   (16.10.2013 21:34)
    Аватар vasja59 Собрал из 4-х акордеонов один,но для каждого хотелось задать свои параметы размеров,а как сделать это - не знаю.Подскажите,плиз!

    0   Спам
    1 vasja59   (16.10.2013 21:32)
    Аватар vasja59 как делать заголовок ссылкой ?


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]