Изображения, использованные в демо-примерах, сделаны изумительным фотографом Марком Себастьяном (Mark Sebastian) и могут быть использованы по лицензии «Атрибуция на тех же условиях» (Attribution-ShareAlike 2.0 Generic (CC BY-SA 2.0) License). Посетите сайт Flickr или персональный сайт Марка, чтобы увидеть замечательные фотографии.
Пожалуйста, обратите внимание на то, что рассмотренные примеры будут работать только в современных браузерах, и, к сожалению, Internet Explorer до сих пор не относится к данной категории, т.к. не поддерживает переходы (а также многие другие предложенные спецификацией CSS3 свойства, которые поддерживаются в других браузерах). Он также не поддерживает текстовые тени, поэтому я добавила дополнительную таблицу стилей для IE, которая позволит, по крайней мере, отобразить элементы меню.
Разметка
Давайте для начала создадим HTML структуру для нашего меню. Мы добавим ее в контейнер с фиксированной шириной. Меню будет выглядеть следующим образом:
1.<ul class="bmenu">2.<li><a href="#">About</a></li>3.<li><a href="#">Illustrations</a></li>4.<li><a href="#">Photography</a></li>5.<li><a href="#">Web Design</a></li>6.<li><a href="#">Personal Projects</a></li>7.<li><a href="#">Contact</a></li>8.</ul>
А теперь мы добавим немного стилей!
CSS
В большинстве наших примеров будут использоваться одинаковые стили для элемента ul и для самих элементов списка. Изменяться будут только ссылки. Итак, вот как выглядят обычные стили для неупорядоченного списка:
01..bmenu{02.padding: 0px;03.margin: 0 0 10px 0;04.position: relative;05.}06..bmenu li{07.font-size: 50px;08.display: block;09.}
А сейчас давайте посмотрим на каждый из семи примеров в отдельности.
Пример № 1
В первом примере мы хотим, чтобы пункты меню были изначально немного размыты. Для этого зададим для ссылок прозрачный цвет и белую тень для текста. Мы также добавим переходы для всех свойств:
01..bmenu li a{02.color: transparent;03.display: block;04.text-transform: uppercase;05.text-shadow: 0px 0px 5px #fff;06.letter-spacing: 1px;07.-webkit-transition: all 0.3s ease-in-out;08.-moz-transition: all 0.3s ease-in-out;09.-o-transition: all 0.3s ease-in-out;10.-ms-transition: all 0.3s ease-in-out;11.transition: all 0.3s ease-in-out;12.}
Нам нужно, чтобы определенная ссылка при наведении становилась «четкой», а остальные — размытыми. Сейчас мы не можем в CSS прописать правило «при наведении на конкретный элемент нужно делать то-то для всех остальных родственных элементов», потому что родственный селектор — это не совсем родственный селектор. Данный селектор просто выбирает все близлежащие элементы, имеющие общего родителя в HTML.
В любом случае мы можем немного схитрить. Поскольку все пункты меню у нас являются блочными элементами, мы можем просто указать, что нужно сделать все размытым при наведении на все меню (неупорядоченный список), а затем при наведении на конкретный элемент сделать его четким:
1..bmenu:hover li a{2.text-shadow: 0px 0px 5px #0d1a3a;3.}4..bmenu li a:hover{5.color: #fff;6.text-shadow: 0px 0px 1px #fff;7.padding-left: 10px;8.}
Добавляя левый отступ, мы тем самым создаем небольшую анимацию для текущего элемента, который будет сдвигаться вправо при наведении на него курсором мыши.
Пример № 2
Во втором примере мы изначально сделаем элементы меню немного скошенными. А поможет нам в этом свойство 2D трансформаций под названием skew. Значением будет -12 градусов, которое изменяет угол скоса (наклона) по оси X. У ссылок будет полупрозрачный фон, который мы получим благодаря использованию значения в rgba. А также мы добавим немного прозрачную текстовую тень, тоже используя rgba:
01..bmenu li a{02.display: block;03.text-transform: uppercase;04.text-shadow: 1px 1px 2px rgba(89,22,20,0.3);05.color: #581514;06.padding: 5px 20px;07.margin: 2px;08.background: rgba(255,255,255,0.2);09.letter-spacing: 1px;10.-webkit-transform: skew(-12deg);11.-moz-transform: skew(-12deg);12.-o-transform: skew(-12deg);13.-ms-transform: skew(-12deg);14.transform: skew(-12deg);15.-webkit-transition: all 0.4s ease-in-out;16.-moz-transition: all 0.4s ease-in-out;17.-o-transition: all 0.4s ease-in-out;18.-ms-transition: all 0.4s ease-in-out;19.transition: all 0.4s ease-in-out;20.}
При наведении на меню мы изменим угол скоса у элементов на 0 и сделаем так, чтобы они стали размытыми на полупрозрачном фоне. А текущий элемент не будет иметь никакого фона при наведении:
01..bmenu:hover li a{02.color: transparent;03.text-shadow: 0px 0px 10px #fff;04.background: rgba(88,22,22,0.2);05.-webkit-transform: skew(0deg);06.-moz-transform: skew(0deg);07.-o-transform: skew(0deg);08.-ms-transform: skew(0deg);09.transform: skew(0deg);10.}11..bmenu li a:hover{12.background: transparent;13.text-shadow: 1px 1px 10px rgba(89,22,20,0.6);14.color: #581514;15.}