Мастерская: создаём меню / Оформляем состояния пунктов [8/28]
×

Оформляем состояния пунктов [8/28]

Пункт меню может находиться как минимум в трёх состояниях:

  1. спокойное состояние;
  2. наведён курсор мыши;
  3. активное состояние — открыта страница, которой соответствует этот пункт.

Хорошим тоном считается задавать стили для этих состояний.

С помощью псевдокласса :hover задают стили при наведении курсора мыши. Для активного состояния создают дополнительный класс, который добавляют активному пункту.

Добавим стили для состояний. Будем считать, что мы находимся на странице Услуги.

Внимание! Не путайте активное состояние пункта меню и псевдокласс :active у ссылок. Этот псевдокласс срабатывает в момент, когда клавиша мыши нажата на ссылке. А активное состояние пункта меню — это часть логики интерфейса.

Что повторить:
  1. Псевдокласс :hover
Хотите стать профессионалом в вёрстке? Тогда записывайтесь на наш интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Оформляем состояния пунктов</title> </head> <body> <ul class="main-menu"> <li><a href="#company">О компании</a></li> <li><a href="#services">Услуги</a></li> <li><a href="#team">Сотрудники</a></li> <li><a href="#contacts">Контакты</a></li> </ul> </body> </html>
CSS
body { padding: 10px; font-family: "Arial", sans-serif; font-size: 14px; line-height: 1.4; } .main-menu { width: 180px; margin: 0; padding: 0; list-style: none; } .main-menu a { display: block; margin-bottom: -1px; padding: 8px 14px; text-decoration: none; color: #0088cc; border: 1px solid #e5e5e5; } /* Ссылка в меню внутри элемента с классом .active */ .main-menu .active a { }
HTML Academy
  1. Добавьте класс active ко второму элементу списка.
  2. Переопределите для ссылок внутри элемента с классом active цвет на white и фон на #0088cc.
  3. Задайте фон #f5f5f5 при наведении на ссылку и наведите курсор на неактивные пункты меню.

В третьей цели правило .main-menu a:hover нужно расположить перед .main-menu .active a .

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

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

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.