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

Красивое современное горизонтальное выпадающее меню на чистом CSS3 для uCoz
24.06.14, 18:55:09



Неплохое горизонтальное меню для вашего сайта, реализованное на чистом css. Неплохая приятная анимация и светлые тона - всё это достаточно здорово сочетается и менюшка в целом очень хорошо смотрится

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

Моё тестирование в фидле: ДЕМО

Установка:

В самый низ вашего css вставляйте:
Код
.ph-lift1 ul, .ph-lift1 li {  
margin: 0;  
padding: 0;  
border: 0;  
font: inherit;  
font-size: 100%;  
vertical-align: baseline;  
list-style: none;  
  }  
  .ph-lift1 {  
min-width: 800px;  
  }  
  .ph-lift1 ul {  
position: relative;  
  }  
  .ph-lift1 > ul:after {  
content:"";  
position: absolute;  
width: 50%;  
border-radius: 40%;  
height: 40px;  
bottom: 0;  
left: 20%;  
box-shadow: 0 0 10px rgba(28, 110, 126, 0.5);  
z-index: -1;  
  }  
  .ph-lift1 > ul:hover:after {  
bottom: 5px;  
  }  
  nav.ph-lift1 {  
text-align: center;  
  }  
  nav.ph-lift1 ul {  
display: inline-block;  
  }  
  nav.ph-lift1 ul:after {  
box-shadow: 0 0 10px rgba(85, 107, 47, 0.5);  
  }  
  nav.ph-lift1 > ul > li {  
float: left;  
  }  
  nav.ph-lift1 ul li {  
height: 80px;  
line-height: 80px;  
background: white;  
-webkit-transition: all.6s ease;  
-moz-transition: all.6s ease;  
-o-transition: all.6s ease;  
-ms-transition: all.6s ease;  
transition: all.6s ease;  
  }  
  nav.ph-lift1 ul li ul {  
max-height: 0;  
-webkit-transition: all.6s ease;  
-moz-transition: all.6s ease;  
overflow: hidden;  
display: block;  
  }  
  nav.ph-lift1 ul li:hover {  
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3) inset;  
background: darkolivegreen;  
  }  
  nav.ph-lift1 ul li:hover ul {  
max-height: 300px;  
  }  
  nav.ph-lift1 ul li a {  
display: block;  
overflow: hidden;  
text-decoration: none;  
color: #546a2f;  
height: 80px;  
  }  
  nav.ph-lift1 ul li ul li a {  
color: #7e7e00;  
  }  
  nav.ph-lift1 ul li ul li:hover {  
background: olive;  
  }  
  nav.ph-lift1 ul li a span {  
-webkit-transition: all.6s ease;  
-moz-transition: all.6s ease;  
-o-transition: all.6s ease;  
-ms-transition: all.6s ease;  
transition: all.6s ease;  
display: block;  
padding: 0 40px;  
  }  
  nav.ph-lift1 ul li:hover > a span {  
margin-top: -80px;  
color: white;  
text-shadow: 0 1px 2px black;  
  }  
  nav.ph-lift1 ul li a span:after {  
content: attr(data-title);  
display: block;  
  }


Следующий код в то место, где будет само меню:
Код
<nav class="ph-lift1">  
<ul>  
<li class="active">  
<a href="#home" data-title="Главная">  
<span data-title="Главная">Главная</span>  
</a>  
<ul>  
<li>  
<a href="#">  
<span data-title="Новости">Новости</span>  
</a>  

</li>  
<li>  
<a href="#">  
<span data-title="Top 10">Top 10</span>  
</a>  
</li>  
</ul>  
</li>  
<li>  
<a href="#portfolio">  
<span data-title="Портфолио">Портфолио</span>  
</a>  
<ul>  
<li>  
<a href="#">  
<span data-title="Веб-дизайн">Веб-дизайн</span>  
</a>  
</li>  
<li>  
<a href="#">  
<span data-title="Макеты">Макеты</span>  
</a>  
</li>  
<li>  
<a href="#">  
<span data-title="Фоны">Фоны</span>  
</a>  
</li>  
</ul>  
</li>  
<li>  
<a href="#">  
<span data-title="Обо мне">Обо мне</span>  
</a>  
</li>  
<li>  
<a href="#">  
<span data-title="Контакты">Контакты</span>  
</a>  
<ul>  
<li>  
<a href="#">  
<span data-title="Email">Email</span>  
</a>  
</li>  
<li>  
<a href="#about">  
<span data-title="Адрес">Адрес</span>  
</a>  
</li>  
</ul>  
</li>  
<ul>  
  </nav>


За основу взята ЭТА статья

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