Нонче тут

Сейчас 57 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Рассматривая различные меню-аккордеоны CSS обнаруживается, что лучший из них построены с использованием CSS3, как и ожидалось, они не работают в Internet Explorer. Это происходит в основном за счет использования CSS3 псевдо-класса “:target”, чтобы открыть аккордеон.

Итак, давайте строить наш собственный CSS3 аккордеон, который должн работать во всех современных браузерах и не очень кошмарить IE7 и 8. Для достижения этой цели мы будем использовать "hover" вместо "target".

Структура меню будет ввиде списка:
<div class="verticalaccordion"> <ul> 
  <li>         <h3>Heading 1</h3> 
  <div>Content For Panel 1.</div>   </li> 
  <li>         <h3>Heading 2</h3>
  <div>Content For Panel 2</div>   </li> 
  <li>         <h3>Heading 3</h3>    
  <div>Content For Panel 3.</div>   </li>   
  <li>         <h3>Heading 4</h3>    
  <div>Content For Panel 4</div>   </li> </ul> </div>
Примечание:
Каждый элемент «li» внутри неупорядоченного списка представляет панель
Каждый «h3» элемент внутри элемента списка представляет голову группы
Каждый «div» элемент внутри элемента списка представляет содержимое панели
Теперь напишем CSS:
.verticalaccordion>ul {
  margin: 0;
  padding: 0;
  list-style:none;
  width: 500px;
  }
  
  .verticalaccordion>ul>li {
  display:block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style:none;
  height:40px;
  width: 500px;
  
  /* Decorative CSS */
  background-color:#f0f0f0;
  }
  
  .verticalaccordion>ul>li>h3 {
  display:block;
  margin: 0;
  padding:10px;
  height:19px;
  
  /* Decorative CSS */
  border-top:#f0f0f0 1px solid;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration:none;
  text-transform:uppercase;
  color: #000;
  background: #cccccc;
  
  /* CSS3 Gradient Effect */
  background: -moz-linear-gradient( top, #999999, #cccccc);
  background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
  /* IE 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   
  /* IE 8 */
  }
  
  .verticalaccordion>ul>li>div {
  margin:0;
  overflow: auto;
  padding:10px;
  height:220px;
  }
  
  .verticalaccordion>ul>li:hover {
  height: 280px;
  }
  
  .verticalaccordion:hover>ul>li:hover>h3 {
  /* Decorative CSS */
  color:#fff;
  background: #000000;
  
  /* CSS3 Gradient Effect */
  background: -moz-linear-gradient( top, #454545, #000000); /* FF, Flock */
  background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000)); 
  /* Safari, Chrome */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000); 
  /* IE 5.5 - IE 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";  
  /* IE 8 */
  }
  
  .verticalaccordion>ul>li>h3:hover {
  cursor:pointer;
  }

Пример доработанного меню

Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.