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

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

Code

<div id="accordion">
  <div class="item">
  <h3>Новости</h3>


"Однажды россияне проснутся и увидят, что 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, Простенькое, акордеона, стиле, меню

Категория: Скрипты для ucoz

Добавил: mega18

Загрузок: 0

Вы сейчас просматриваете Простенькое меню в стиле акордеона. Данный файл находится в категории Скрипты для ucoz. Чтобы увидеть другие файлы из этой категории, перейдите по этой ссылке: Скрипты для ucoz. Для того чтобы скачать Простенькое меню в стиле акордеона нажмите на кнопку СКАЧАТЬ ФАЙЛ выше. Надеемся вам понравился файл Простенькое меню в стиле акордеона и пригодился. По всем вопросам обращайтесь в чат на сайте или к администрации.

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

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