Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Горизонтальное меню с размытием неактивных пунктов на CSS

28 февраля 2017 | Опубликовано в css | 9 Комментариев »

Мы решили создать интересное меню без использования наборов изображений, с помощью только 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

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

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




Комментарии

  1. Merziuz
    Thumb up Thumb down 0

    NTicvp pills2sale.com viagra online

    Ответить

  2. German
    Thumb up Thumb down 0

    I'm unemployed evermax battery review Oakwood, in the West Midlands, opened in April 2012 and is one of the largest jails in the country, with a capacity for 1,600 male inmates. On its website, the prison says that it aspires to be regarded as «the leading prison in the world» within five years.

    Ответить

  3. Madeline
    Thumb up Thumb down 0

    Free medical insurance tariffario commercialisti 2018 Donald Graham, the chairman and CEO of the Washington Post Co, said in an interview that he and his niece Katharine Weymouth, the Post's publisher, made the decision to put the newspaper up for sale earlier this year after looking at its financial forecasts.

    Ответить

  4. Dirtbill
    Thumb up Thumb down 0

    Whereabouts in are you from? prozac or zoloft "I cannot tell the government how to raise the sales tax,but our economic forecasts are based on the assumption that thegovernment carries out the plan in two steps, as laid out in thesales tax law. "

    Ответить

  5. Jackson
    Thumb up Thumb down 0

    I quite like cooking paracetamol syrup untuk anak Ask.fm has attracted 70 million users since it was founded in 2010. The site made headlines in the United States last week when kidnapping victim Hannah Anderson logged on just 48 hours after her rescue in Idaho to openly answer personal questions about her ordeal.

    Ответить

  6. Waylon
    Thumb up Thumb down 0

    I love this site acetaminophen or ibuprofen when pregnant Not much more than a decade after it declared independence following the collapse of the USSR, Latvia was welcomed as an EU member in May 2004. The move came just weeks after it joined Nato. These developments would have been extremely hard to imagine in the 51 years when Latvia — like Estonia and Lithuania — was occupied by the Soviet Union.

    Ответить

  7. Abdul
    Thumb up Thumb down 0

    Do you know what extension he's on? cephalexin 250 mg for uti "I did not know Oct. 1, my pub date, would be the shutdown, " he told those attending his book party Tuesday night, held at the private Sidecar bar of downtown D.C.'s P.J. Clarke's. "But I did know things in Washington were not the way they were when I came here in the '70s, they were not so well in the '80s, they were worse in the '90s and they are worse now. "

    Ответить

  8. uwbzwmnkr
    Thumb up Thumb down 0

    vs43op osomgkbhznwf, [url=http://vxqvnqwuvqam.com/]vxqvnqwuvqam[/url], [link=http://teibejzuwdts.com/]teibejzuwdts[/link], xodybxogantk.com

    Ответить

Оставить ответ


− семь = 2

Вставить изображение