Используем переходы CSS3 и псевдо-классы CSS2 для создания анимированной навигационной ленты с минимальной разметкой.
Поддержка браузерами
IE8 и IE9 не поддерживают переходы CSS3, поэтому наведение курсора мыши на пункт меню не будет анимироваться в указанных браузерах. IE7 плохо поддерживает псевдо-элементы :before и :after, поэтому лента не будет иметь раздвоенных концов и загибов в активном состоянии. При необходимости псевдо-элементы можно заменить другой разметкой.
Во всех остальных браузерах меню отображается и работает отлично.
HTML
<div class='ribbon'>
<a href='#'><span>Главная</span></a>
<a href='#'><span>О нас</span></a>
<a href='#'><span>Сервисы</span></a>
<a href='#'><span>Кнотакт</span></a>
</div>
Раздвоенные концы и сгибы будут формироваться с помощью псевдо-элементов, поэтому разметка может остается чистой.
CSS
Раздвоенные концы
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #fff;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
Здесь псевдо-элементы :before и :after используются для создания пустого элемента с тонкой рамкой. Рамка имеет одну сторону прозрачной. Таким образом элемент выглядит с удаленной треугольной секцией, что, в конечном итоге, формирует раздвоенный конец.
Ссылки
.ribbon a:link, .ribbon a:visited {
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
Ссылки и раздвоенные концы смещаются влево, так что они выстраиваются в одну линию. Скрытие выступающих элементов прячет складки, которые располагаются ниже элементов span.
Анимированные складки
.ribbon span {
background:#fff;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #fff;
}
Оригинальный трюк для вертикального центрирования текста внутри элемента заключается в установке высоты строки текста и удалении вертикальных отступов. Таким образом сохраняется фиксированная высота и центрирование текста, даже при изменении шрифта, его размера или начертания.
Верхнее поле дает пространство для анимации элемента span, оставаясь внутри ссылки. Элемент span имеет относительное позиционирование, поэтому может быть опорой для абсолютно позиционированных псевдо-элементов :before и :after.
Переходы CSS3 анимируют изменение состояния при наведении курсора мыши на элемент span. Переходы являются экспериментальными особенностям и не включены в спецификацию CSS3. Поэтому, каждый браузер использует свои префиксы для них.
Псевдо-элементы :before и :after создают завернутые грани при наведении курсора мыши на ссылку. Они позиционируются абсолютно под элементами span и будут скрываться в обычном состоянии. Псевдо-элементы содержат только нижнюю и левую или правую части рамки. Части рамки тонкие, длинные (0.5 x 0.5) и располагаются рядом, поэтому они формируют треугольники. Нижняя часть рамки будет иметь такой же цвет, как и лента, а левая часть - цвет подвернутой стороны.