меню в стиле Аккордеон - Скрипты для uCoz - Скрипты - Каталог статей

Главная » Статьи » Скрипты » Скрипты для 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;
}

Скопировать данный код

Категория: Скрипты для uCoz | Добавил: dEnny (25.03.2011)

Просмотров: 540 | Теги: аккордеон, стиле, Меню | Рейтинг: 0.0/0

Всего комментариев: 0

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

Уроки Photoshop

Витрина ссылок

Реклама

Наш опрос

Статистика

Форма входа

Мини-чат


Логин:
Пароль:

	200