Верстаем меню для сайта

В этом уроке, мы с вами поговорим о том, как сверстать верхнее меню, аналогичное тому, которое находиться на моем блоге (под хедером).

Меня несколько подписчиков просили об этом, поэтому сегодня я решил выпустить данный видеоурок.

Это меню, мы будем верстать используя CSS3 и за счет этого научимся на практике применять некоторые современные CSS-свойства.

Наш урок состоит из 2-х видео. В одном, мы с вами, верстаем пункты меню, а во втором, делаем форму поиска.

Верстаем пункты меню

После того, как вы сверстали все пункты меню. Можно приступать к верстке формы поиска. Именно об этом у нас и пойдет речь в видеоуроке ниже.

Верстаем форму поиска

Пару слов о кроссбраузерности

Так как, мы с вами применяли свойства из CSS3, такие как, text-shadow, box-shadow, border-radius, то разумеется старые версии браузера Internet Explorer не будут нормально отображать наше меню. То есть, более-менее корректно, наше меню будет отображаться начиная с версии IE9.

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

Добавить комментарий

  • А как лучше поменять цвет кнопки, которая соответствует активной странице? В "гугле" все прописывают отдельный класс для каждой странице. Может существует какая-нибудь автоматизация (по примеру наведения hover)?

    • Виталий, либо через JS, либо в бутстрапе есть поддержка данной фичи

  • Всё хорошо, всё отлично. Толково. Но текстовых статей все-таки не мешало бы.