Приветствую Вас Прохожий | RSS Суббота, 10.12.2016, 04:05
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 4
Гостей: 4
Пользователей: 0



Главная » Файлы » Скрипты для uCoz » Скрипты блоки и шапки

меню в стиле Аккордеон

меню в стиле Аккордеон меню, стиле, Аккордеон
C помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле Аккордеон.

Установка:
В блок, или в нужное вам место вставляем данный код:

Code
<div id="accordion">
  <div class="item">
  <h3>Новости</h3>
  <p>"Однажды россияне проснутся и увидят, что 1 доллар стал равен 53 рублям. И всё — никаких резких колебаний. Стабильно 53 рубля."</p>
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>

В css:

Code
#accordion .item {
  width: 400px;
  height: 30px;  
  overflow: hidden;
   
  border: 1px solid #ccc;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
   
  margin-bottom: 2px;
}
#accordion h3 {
  display: block;
  height: 20px;
  line-height: 20px;
  margin: 0px 0px 5px 0px;
  background: #e6e6e6;
  padding: 5px;
  color: #1e1e1e;
  text-decoration: none;
}
#accordion p {
  height: 150px;
  padding: 5px;
}
#accordion div:hover h3 {
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}

.aleft {
  float:left;
  width:90px;
}
.aright {
  float:left;
  width:90px;
}
.arsip li {
  float: left;
  width: 120px;
}
.clearfix {
  display: inline-block;
}

#accordion .item {  
  transition: height ease-in-out 500ms; /* css3 transition */
  -o-transition: height ease-in-out 500ms;
  -moz-transition: height ease-in-out 500ms;
  -webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
  height: 180px;  
}

#accordion .item {
  width: 400px;
  height: 30px;  
  overflow: hidden;
   
  transition: height ease-in-out 500ms; /* css3 transition */
  -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: 20px;
  line-height: 20px;
   
  background: #e6e6e6;
  padding: 5px;
  color: #1e1e1e;
  text-decoration: none;
}
#accordion p {
  height: 150px;
  padding: 5px;
}
#accordion div:hover {
  height: 180px;  
}
#accordion div:hover h3 {
  border-bottom: 1px solid #ccc;
  font-weight: bold;
}
Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 4819 | Комментарии: 1 | Рейтинг: 3.3/3 | |Категория: Скрипты блоки и шапки | Добавил: мир | Дата: 24.03.2011 | Скачали: 0 | Теги: аккордеон, стиле, меню
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 1
1 mrserzh   Дата: 05.04.2012  Время: 20:29   [№ 12764]
Здрасте! А не подскажете вот на таком же примере, как не меняя стилей, не добавляя картинок и т.п.(оставив в стиле шаблона), сделать выпакадющее меню аккордион только под раздел Интернет-магазин (shop), которое будет показывать в нём категории товаров ($CATEGORIES$). Смысл в том, чтоб на сайте не было отдельного блока Категории к интернет-магазину, а он был сразу же под ним и с теми же параметрами. Не селён в этом. Спасибо!


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

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru