Меню «Аккордеон» без javascript и изображений


Меню «Аккордеон» без javascript и изображений

1754
5 из 10
Проголосовало: 4




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;
}
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 1

4Хокаге
+2
4Хокаге написал: Написано 23 Марта 2011 в 15:52
Комментарий №1
Оставляет желать лучшего...

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    203
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: