Красивое меню на CSS3

Чуть меньше года назад Snickersmix публиковал статью "Меню с плавной инверсией цвета". В данной статье описывается меню, сделанное на JavaScript. Днём ранее он мне показывал сайт, на котором он делал это меню, и я, как поклонник NoScript, возмутился: «Это меню можно сделать на CSS!»

Я, конечно, погорячился, ибо сделать можно похожее меню, а не именно такое. Однако, обычный пользователь, особенно тот, который не в курсе дел, не заметит разницы. В том числе и я сразу не понял фишки этого меню. Хотя я поклонник всяких мелких деталей и нюансов при создании чего-либо, ибо из этих мелких деталей и нюансов строится общее впечатление о проекте.

Итак, предлагаю реализацию похожего меню на CSS3.

Чтобы сразу ты, уважаемый читатель, увидел отличия приведу финальную демку меню на CSS3 и демку меню от Snickersmix на JS

Теперь постараюсь вкратце рассказать про процесс создания

HTML

<nav id="a"> 	<ul><li><a href="#">Главная</a></li><li><a href="#">О компании и услугах</a></li><li class="active"><a href="#">Контактная информация</a></li><li><a href="#">Вакансии</a></li><li class="slide"></li></ul> </nav> 

1) У меню display inline-block, поэтому между тегов не должно быть пробелов и переносов строк
2) Последний элемент меню с классом slide будет двигающейся плашкой. Я искал способ сделать через псевдоэлемент before/after, но так и не нашел.

Вариант 1
Данный вариант я написал достаточно быстро — тут фиксированная ширина элементов.

В этом и остальных меню используется CSS3 анимация перехода transition

transition: all 0.5s ease-in-out;

Данную анимацию я назначил на любые (all) действия/изменения над элементами списка (li, a).

Теперь надо было заставить двигаться элемент с классом slide. Для этого я задал этому элементу position: absolute, не забыв его родителю (ul) задать position: relative, чтобы slide позиционировался относительно меню, а не страницы. Таким образом, мы с помощью left или right можем двигать его по меню.

Но как заставить двигаться? В первом варианте я сделал абсолютный просчет каждого элемента в пикселях, т.е. получил размеры и координаты. И с помощью селектора обобщенных родственных элементов заставил slide двигаться при наведении.

.active:nth-child(1) ~ li.slide, /* тут для АКТИВНОГО пункта позиция */ li:hover:nth-child(1) ~ li.slide { /* тут при наведение позиция */ 	left: 0; 	width: 147px; } .active:nth-child(2) ~ li.slide, li:hover:nth-child(2) ~ li.slide { 	left: 147px; 	width: 241px; } .active:nth-child(3) ~ li.slide, li:hover:nth-child(3) ~ li.slide { 	left: 388px; 	width: 257px; } .active:nth-child(4) ~ li.slide, li:hover:nth-child(4) ~ li.slide { 	left: 645px; 	width: 156px; } 

Вроде работает, но ужасно неудобно:
— Необходимо постоянно просчитывать элементы, если они меняются
— Имеется баг — если шрифты не проходят, то всё меню рушится

Вариант 2
Вариант с анимацией фона

Меню было сделано и показано Snickersmix. И после мне были «открыты глаза». Оказывается, у него фишка в «плавной инверсии цвета». Тут я начал искать варианты решения, но на данный момент не нашел, зато было сделано само меню.

Вариант 1a
Начались поиски, и родился вариант «один с половиной». Получилось небольшое украшательство

Я надеялся, что можно попробовать как-то реализовать через фильтры svg матриц, но к сожалению ничего не получилось (Вариант 3)

И попытка сделать через псевдоэлементы before/after, вместо дополнительного элемента slide, но тоже не удачно. Ждём CSS4 и возможность обращаться к родителю. (Вариант 4)

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

Прошел с тех пор почти год и я решил пофиксить меню, а заодно и написать статью.
И так, встречайте, финальный пятый вариант данного меню

В общем, ничего кардинально нового не появилось. Отличие лишь в том, что размеры указаны в процентах, что избавляет нас от проблемы со шрифтами, а заодно даёт возможно вставить меню в резиновую или адаптивную верстку.

Так же в пятый вариант были добавлены фиксы для IE6-9. Конечно, в них не будет анимации, но меню вполне съедобно.

В общем вот и всё. Всё достаточно легко и просто.
Если кто придумает другой вариант реализации — буду рад увидеть и, думаю, не только я.

Спасибо, что дочитали до конца!