Меню на чистом 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/;}

Готово!

Мне нравится 35

Просмотры: 5208 · Комментарии: 11 · Добавил: Kelin · Категория: Рецепты HTML и CSS

Порядок вывода комментариев:

26.12.2014 в 22:19

Soffi23

Наткнулась в ФБ на пост, мол раздают интерактивные музыкальные открытки с логотипом твоего магазина БЕСПЛАТНО. Не поверила, но как любой любитель халявы, репост с определенным текстом сделала)) Написала ребятам, мол вот репост давайте теперь открытку. И дали!! Даже на выбор что-то предложили. Новогодняя открытка-поздравление с моим логотипом. Ищите хештег #bSimpleCard.

03.03.2014 в 23:22

Crazyk^

Сейчас 21 век и люди пользуются планшетами, гаджетами с выходом в интернет, где нету курсоров, как им быть?

14.08.2013 в 11:59

slavick

И еще мне интересно, почему оно наполовину скрыто а не открывается с помошью кнопки??

14.08.2013 в 14:09

Kelin

Так удобнее smile

14.08.2013 в 20:29

А мне кажется Что наоборот так не удобней,
1. web-нуб вообще не поймет где меню пока случайно туда мышка не слетит у него biggrin

2. Нужно прицельно туда попасть dry

тоесть не всегда удобно может ты хочешь быстро перейти куда-либо а тут бац нужно сначало на линию толщиной пару пикселей умудриться навести курсор sad

15.08.2013 в 10:12

Толщина вообще-то 5 пикселей, наводится легко и без проблем.
Найдет даже WEB-нуб, когда из адресной строки или вкладки курсор на страницу переместит. Заметит же, что что-то шевельнулось

15.08.2013 в 12:19

А если он с закладок зайдет и у него сразу курсор посередине экрана будет biggrin

15.08.2013 в 13:59

Но сайт не сразу в закладках оказывается, верно ведь?

16.08.2013 в 11:07

COBA95

Что мешает просто поменять изменить размер полоски в css ?
я думаю что ничего так что флаг в руки smile

14.08.2013 в 09:34

Класссс,
Жаль что все таки нету слева частично скрытого меню категорий ну это уже пофиг можно просто Выпадающие сделать

14.08.2013 в 11:43

Я посчитал это лишним нагромождением и не стал делать.