Главная » 2012 » Июль » 12 » Вертикальное меню аккордеон с описанием (Скрипты для ucoz)
12.07.2012, 12:04

Вертикальное меню аккордеон с описанием




Вертикальное меню-аккордеон с описаием категорий.
1. Подключаем библиотеку jquery-latest.js:
Code
<script type="text/javascript" src="/jquery-latest.js"></script>

2. Этот HTML код, устанавливаем там где хотим увидеть меню:
Code
<div id="menu_pop">
<ul id="accordion">
  <li><div class="first">CSS3<br>
  <span class="button_podtext">Основные возможности</span></div>
  <ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  </ul>
  </li>
  <li><div>HTML5<br>
  <span class="button_podtext">Продолжение или новая платформа?</span></div>
  <ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
  <li><a href="#">Ссылка 4</a></li>
  </ul>
  </li>
  <li><div>WordPress<br>
  <span class="button_podtext">Новости в мире CMS</span></div>
  <ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
  </ul>
  <li><div>Основное<br>
  <span class="button_podtext">Блог, Тесты, Форум</span></div>
  <ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li><a href="#">Ссылка 3</a></li>
  </ul>
  </li>
</ul>
<div class="menu_bottom"><i>develop by Dark-Artstudio</i></div>
</td>
</div>

3. В CSS ставим:
Code
#menu_pop {
  margin: 150px auto ;
  width: 280px;
  background: url('wood.jpg');
  border-radius: 6px;
  padding: 7px;
  box-shadow: 0px 1px 5px #000;
}
#accordion {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
#accordion .button_podtext {
  font-size: 9px;
  color: #b1b1b1;
}
#accordion div {
  display: block;
  cursor: pointer;
  text-decoration: none;
  display: block;
  padding: 8px 0px 8px 11px;
  background: #000;
  color: #fff;
  font-size: 12px;
  font-family: tahoma;
  background: url('bg.png') 0px 0px;
  text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
  list-style: circle;
}
#accordion div:hover {
  background: url('bg.png') 0px -44px;
}
.first {
  border-radius: 3px 3px 0px 0px;
}
#accordion ul a {
  color: #777;
}
#accordion ul {
  list-style: none;
  padding: 5px;
  font-size: 10px;
  font-family: Tahoma;
  background: #1a1a1a;
  box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);
  display: none;
}
#accordion ul li {
  font-weight: normal;
  cursor: auto;
  padding: 3px 7px;
}
#accordion a {
  text-decoration: none;
}
#accordion a:hover {
  text-decoration: underline;
}
#menu_pop .menu_bottom {
  display: block;
  padding: 3px 6px 3px;
  background: #000;
  color: #fff;
  font-size: 9px;
  border-radius: 0px 0px 3px 3px;
  font-family: georgia;
  background: url('bg_bottom.png') 0px 0px;
  text-align: right;
  text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
}
 
Материал взят с сайта infoscript.ru
Теги: Скачать Вертикальное меню аккордеон с описанием
Скачать "Вертикальное меню аккордеон с описанием"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: http://www.dark-artstudio.ru/
Категория: Скрипты uCoz | Просмотров: 3171 | Добавил: sold93 | Рейтинг: 4.7/3 |
Теги: описанием, вертикальное, Аккордеон, меню
Всего комментариев: 1
0  
1 UnderCore   (15.07.2012 01:10) [Материал]
Аватар пользователя
Отличное меню! Поменяю дучше цвет на зелёный happy

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