Меню на чистом CSS
827материалов
228тем на форуме
3003комментария
6152пользователя

Меню на чистом CSS


Недавно начал баловаться с CSS3-трансформациями и анимациями, и вот - выкладываю простенькую горизонтальную менюшку. Вид меню вы можете просмотреть на скриншоте (скриншот анимированный). Как видите, изначально меню частично скрыто вверху, при наведении оно выезжает полностью. 
Т.к. меню сделано с использованием CSS3, эффекты не работают в IE. Но само меню отображается корректно. 

Установка

1. Код меню:
Код
<ul class="wmtop">  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
  <li><a href="#">Главная</a></li>  
</ul>

2. CSS-стили:
Код
.wmtop {position:fixed;top:0;box-sizing:border-box;-moz-box-sizing:border-box;width:100%;padding:0 20px;background:rgba(0,0,0,.7);background:#333\0/;list-style:none;margin-top:-5px;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px);-webkit-transition:-webkit-transform .5s cubic-bezier(.7,-0.2,.3,1.5);-moz-transition:-webkit-transform .3s ease;-ms-transition:-webkit-transform .3s ease;transition:transform .5s cubic-bezier(.7,-0.2,.3,1.5);}  
.wmtop:hover {-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}  
.wmtop li {display:table-cell;width:1%;-webkit-transform:skewX(160deg);-moz-transform:skewX(160deg);-ms-transform:skewX(160deg);transform:skewX(160deg);}  
.wmtop a {color:#fff;text-decoration:none;display:block;text-align:center;-webkit-transform:skewX(-160deg);-moz-transform:skewX(-160deg);-ms-transform:skewX(-160deg);transform:skewX(-160deg);padding:18px;}  
.wmtop li:hover {background:rgba(0,0,0,.3);background:#222\0/;}

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 14.09.2013 в 22:40
Материал просмотрен: 813 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта