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

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

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

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

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

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

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

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

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

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

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (3)

Виталий 15 мая 2015 г. в 09:40

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

Ответить

Евгений 9 июня 2015 г. в 23:39

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

Ответить

Александр 3 июля 2014 г. в 17:03

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

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

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

« Вернуться назад