Верстка горизонтального меню

В этом уроке мы сделаем горизонтальное меню (шаблон горизонтального меню с выпадающим списком):

Верстка горизонтального меню

Для начала создадим блок <div class="navigation"></div>. Он будет располагаться сразу после блока с классом header. В блоке с навигацией мы создадим список, каждым пунктом которого будет ссылка меню.

Верстка горизонтального меню

Теперь каждый пункт нужно заключить между тегами <a href="/"></a>. А дальше остается только прописать стили.

Сначала пропишем стили для блока с классом navigation. Там нужно указать свойства: display, height, background, border-radius, box-shadow. Display указывает браузеру как отображать элемент на веб-странице, нам надо, чтобы элемент отображался как блок, т.е. ставим display: block. Далее высота 32px. Фоновый рисунок должен повторяться только по горизонтали. Вот его кусок:

Верстка горизонтального меню

Как видно из макета, уголки у нас закругленные, радиус скругления составляет три пикселя. Нужно, чтобы скругленные уголки отображались во всех браузерах, поэтому мы запишем три свойства: border-radius, -moz-border-radius, -webkit-border-radius, тогда все будет корректно отображаться в Chrome, Opera, Mozilla и Safari. 

И тень для блока прописывается при помощи свойства box-shadow, для всеx браузеров, так же как и радиус запишем -moz-box-shadow, -webkit-box-shadow. Вот как должно получиться:

Верстка горизонтального меню

Переходим к списку. Добавьте ссылки к пунктам меню:

Верстка горизонтального меню

В стилях запишем свойства для пунктов меню: 

Верстка горизонтального меню

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

Первым делом мы убираем отступы и обтекание у блока ul. Затем для пунктов, т.е. для тега li мы устанавливаем обтекание по левому краю, чтобы ссылки располагались по горизонтали, а также убираем маркеры. Все остальное - это цвет текста, размер, толщина, подчеркивание и отступы я делаю для тега a.

http://youtu.be/Vl9ck62-vss

Источник: http://psd-html-css.ru/css/verstka-gorizontalnogo-menyu

Читать комменты и комментировать

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



Защитный код
Обновить

Верстка горизонтального меню | | 2012-04-11 19:14:00 | | Статьи Web-мастеру | | В этом уроке мы сделаем горизонтальное меню (шаблон горизонтального меню с выпадающим списком):Для начала создадим блок . Он будет располагаться сразу после блока с классом header. В блоке с | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: