Главная » Файлы » Прочие скрипты » CSS

Простое анимированное выпадающее меню на css3 для вашего сайта
24.06.14, 14:28:36

Скачать файл




Простое анимированное меню на 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

Материал подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: Простое, анимированное, на, Вашего, CSS3, сайта, для, Меню, Выпадающее
Просмотров: 373 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: