Приветствую Вас, Гость! Регистрация RSS

Ulink

Понедельник, 17.11.2025
Главная » Файлы » Скрипты » Cкрипты
Меню «Аккордеон» без javascript и изображений
30.12.2011, 22:12
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;  
}
Категория: Cкрипты | Добавил: Mihail
Просмотров: 704 | Загрузок: 0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]