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

Разметка

Для начала создадим типичный для меню код HTML:

<ul id=fuzzy-nav-example>
  <li><a href=#><span>Start Here</span>Home</a>
  <li id=about-us><a href=#><span>Our Story</span>About Us</a>
  <li><a href=# id=graphic-design><span>Where We Started</span>Graphic Design</a>
  <li><a href=#><span>Our Passion</span>Web Design</a>
</ul>

Код CSS

ul#fuzzy-nav-example {
  background-color: #666;
  overflow: hidden;
  padding:.5em;
  padding-bottom: 2rem;
  margin-left: 0;
  text-align: center;
  font-family: Avenir, sans-serif;
}
ul#fuzzy-nav-example li {
  display: inline;
  float: left;
  margin-top: -1em;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  transition: text-shadow .4s;
}
ul#fuzzy-nav-example li a {
  color: #fff;
  text-decoration: none;
  font-weight: 900;
  font-size: 1.8rem;
  padding:.5em;
  border-bottom: none;
}

Разметка осложнена наличием подзаголовков под каждым пунктом меню. Подзаголовкам нужно находиться в дополнительном элементе, чтобы к ним можно было обращаться в коде CSS. Теперь зададим стили этим текстам, находящимся в элементах <span>:

ul#fuzzy-nav-example li a span {
  font-size: 1rem;
  font-weight: 400;
  color: #999;
  display: block;
  text-transform: uppercase;
  margin-bottom: -5px;
  text-align: left;
}

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

Сначала зададим размытие всего текста в меню, когда указатель мыши находится рядом с ним:

ul#fuzzy-nav-example:hover li {
  text-shadow: 0 0 6px #fff;
  opacity: 0.8;
}

Этот селектор означает: когда пользователь наводит указатель мыши в любое место элемента меню, задать следующие свойства элементам пунктов меню внутри него.

Объявление заменяет значения свойства тени текста у элемента пункта меню на белую тень, которая не смещена горизонтально или вертикально, но у нее высокое значение размытия. В то же время прозрачность элемента пункта меню уменьшена на 20%.

Таким же образом можно создать эффект свечения вокруг текста, но, пожалуйста, используйте его очень аккуратно.

Теперь нам нужно задать отсутствие размытия тому пункту меню, на котором находится указатель мыши пользователя:

ul#fuzzy-nav-example li:hover {
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

Это все, что нужно: шесть объявлений CSS.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание тени текста CSS
• Выпадающее меню с использованием только CSS и недокументированных возможностей элемента флажка
• Создание блока с наклонной нижней рамкой