Простое анимированое выпадающее меню на CSS3 (имеется DEMO)
22.02.2015 в 00:48
Автор: babygirl | Комментариев (0) | Просмотров: 404 | Скачали: 8
Простое анимированое выпадающее меню на CSS3 (имеется DEMO)
Описание файла:

Простое анимированое меню на css3 с выпадающими подпунктами.

Простое анимированное меню на css3 с выпадающими подпунктами 

Для начала посмотрите ДЕМО 

Установка: 

В то место, где должно быть меню, вставляйте: 

Код

<link href="/css/style.css" rel="stylesheet" type="text/css" />   

<div class="wrapper">   
  <ul>   
  <li id="a"><a href="#a">Web Design</a>   
  <div>   
  <b>HTML:</b><a href="#">Tutorials</a> | <a href="#">Resources</a> | <a href="#">Downloads</a> | <a href="#">Blog</a> | <a href="#">More...</a>   
  <hr/>   
  <b>CSS:</b><a href="#">Tutorials</a> | <a href="#">Examples</a> | <a href="#">Downloads</a> | <a href="#">Resources</a> | <a href="#">More...</a>   
  <hr/>   
  <b>CMS:</b><a href="#">Drupal</a> | <a href="#">Wordpress</a> | <a href="#">Joomla</a> | <a href="#">Plugins & Resources</a> | <a href="#">More...</a>   
  <hr/>   
  <b>Javascript:</b><a href="#">Tutorials</a> | <a href="#">Downloads & Resources</a> | <a href="#">Plugins</a> | <a href="#">More...</a>   
  <hr/>   
  <b>Jquery:</b><a href="#">Resources</a> | <a href="#">Free Jquery Plugins</a> | <a href="#">Tutorials</a> | <a href="#">More...</a>   
  <hr/>   
  <b>Tools:</b><a href="#">HTML Validator</a> | <a href="#">CSS Validator</a> | <a href="#">More...</a>   
  <hr/>   
  <b>Certifications:</b><a href="#">W3Schools</a> | <a href="#">Adobe</a> | <a href="#">HWG</a> | <a href="#">Brainbench</a>   
  </div>   
  </li>   
  <li id="b"><a href="#b">Graphic Design</a>   
  <div>   
  <hr/>   
  <b><a href="#">Printmaking</a></b>   
  <hr/>   
  <b><a href="#">Visual Arts</a></b>   
  <hr/>   
  <b><a href="#">Typography</a></b>   
  <hr/>   
  <b><a href="#">Desktop Publishing</a></b>   
  </div>   
  </li>   
  <li id="c"><a href="#c">Animation & Graphics</a>   
  <div>   
  <hr/>   
  <b>2D Animation: </b>   
  <a href="#">Analog animation</a> | <a href="#">Flash animation</a><br><a href="#">PowerPoint animation</a> | <a href="#">More...</a>   
  <hr/>   
  <b>3D Animation: </b>   
  <a href="#">Motion capture</a> | <a href="#">Photo realistic</a><br><a href="#">Character animation</a> | <a href="#">More...</a>   
  <hr/>   
  <b>Resources: </b>   
  <a href="#">Tutorials</a> | <a href="#">Downloads</a><br><a href="#">Examples & Downloads</a> | <a href="#">More...</a>   
  </div>   
  </li>   
  <li id="d"><a href="#d">Design Resources</a>   
  <div>   
  <hr/>   
  <b><a href="#">w3schools.com</a></b>   
  <hr/>   
  <b><a href="#">alistapart.com</a></b>   
  <hr/>   
  <b><a href="#">smashingmagazine.com</a></b>   
  <hr/>   
  <b><a href="#">cssbeauty.com</a></b>   
  <hr/>   
  <b><a href="#">speckyboy.com</a></b>   
  <hr/>   
  <b><a href="#">more...</a></b>   
  </div>   
  </li>   
  </ul>   
</div> 

Файл в архиве залить в папку css!

Скачать файл

Инструкция по установке шаблонов:
Инструкция, приведенная ниже, поможет Вам быстро установить скачанный у нас с сайта шаблон. Для правильной установки прочтите, пожалуйста, внимательно все пункты инструкции, дабы не возникло дополнительных вопросов.
1. Прежде всего загружаем содержимое папки Файловый Менеджер на Ваш сайт.
2. Далее заходим в Дизайн - Управление дизайном (CSS), копируем содержимое файла Таблица стилей и вставляем с заменой. После используем текстовый файл Конструктор шаблонов для создания каркаса дизайна (Дизайн - Конструктор шаблонов).
3. И в заключении устанавливаем сами модули, находятся они в папках с названием, соответствующему названию модуля.


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