Красивое меню для сайта CSS

Интернет переполнен разнообразными сайтами различной тематики. Каждый владелец ресурса желает сделать свой сайт неповторимым и отличающимся от других сайтов, т.е. придать некую индивидуальность. Веб-мастера трудятся над разработкой дизайна не одну неделю, и в итоге у них рождается фирменный стиль, т.е. дизайн, который будет подчеркивать индивидуальность бренда владельца ресурса.

Веб-мастера которые «в теме» стараются использовать новомодные примочки и технологии для индивидуализации дизайна и повышения юзабилити сайта. В этом уроке мы будем создавать красивое горизонтальное меню для сайта с использованием технологии «HTML 5» и «CSS 3».

Просмотреть ДЕМО.

В следующем посте я расскажу вам, как сделать изображение прозрачным при наведении на него курсора мыши. Мы будем делать поистине классный эффект, потому что мы будем использовать библиотеку JQuery! Классный плавный эффект ждет вас друзья в следующем посте! Поэтому, подпишитесь, чтобы его не пропустить!

Открываем любой редактор кода. Создаем два файла «index.html» и «style.css». Не забываем про кодировку UTF-8. Сохраняем оба файла в какую-нибудь папку и приступаем к верстке меню.

Верстать мы будем горизонтальное меню для сайта с помощью списков. Что такое верстка я говорил в статье «верстка html». Меню будет состоять из пяти разделов. Будет иметь фоновый графический цвет, при наведении цвет ссылки и фона будет изменяться. Вот как будет выглядеть файл «index.html». Не забывайте, что HTML 5 требует подключения дополнительных модулей к сайту.

Я определил маркированный список с пятью элементами списка, которые являются пунктами нашего меню. Текст в каждом пункте является ссылкой. Определил два класса: класс «menu» и класс «menu-item». Поместил меню в блок «div» для более гибкой манипуляции.

Я подготовил для урока графические изображения. Скачать можете тут. В архиве находятся фоновое изображение, фон для линии меню и разделители пунктов меню. В файле стилей я сделал небольшой сброс стилей, для элементов списка и прописал следующие свойства для тела документа «body»:

Теперь задаем свойства для главного блока, в котором находится меню. Это блок «div» с идентификатором «head-line».

Я настроил отступ сверху, сделал ширину в 100% страницы, установил высоту, и указал фоновое изображение, которое будет служить в качестве основного фона для всего меню. Теперь приступаем к оформлению ссылок и расположению их по центру блока меню. Для списка ссылок я придал следующие свойства:

Выровнял список со ссылками по центру, указал ширину и высоту меню, указал, что это будет блочный элемент. Теперь оформим сами пункты меню:

С пунктами меню дела обстоят так: я добавил обтекание каждого пункта меню по левому краю, что группирует все пункты меню в одну горизонтальную строку. Этот прием позволяет создать горизонтальное меню для сайта. Также я определил шрифт, высоту и ширину, высоту строки, цвет и шрифт, который будет использоваться по умолчанию.

Далее я применил свойства для текста, который является ссылкой. Я обозначил, что все ссылки, которые имеют класс «.menu-item» будут блочными, что позволяет растянуть их по высоте и ширине, убрал подчеркивание, пока ссылка неактивна. Сейчас пришло время, чтобы настроить свойства ссылок при наведении на них курсора мыши. Для этого я прописал следующие свойства:

Для этого я использовал псевдо класс «:hover», чтобы указать что свойства, которые записаны внутри фигурных скобок будут применяться только при наведении на ссылку курсора мыши. Я изменил цвет на темно синий, добавил подчеркивание, установил фоновую картинку, которая будет подсвечивать пункт меню, на который наведен курсор. Такое решение немного уступает решению с использованием спрайтов, но тоже очень удобное и простое. Осталось добавить разделители. Пропишем следующие свойства:

Я указал фоновые изображения, которые являются разделителями (фоновые изображения я подготовил в программе фотошоп, когда рисовал меню). Я установил фоновые изображения для всех пунктов меню и выровнял фон по левому краю. Убрал фоновое изображение у первого элемента, с помощью псевдо класса «:first-child».

Таким образом, у меня получилось, что по краям нет фоновых изображений, которые обязательно бы присутствовали справа или слева (зависит от позиции фонового изображения). Вот таким простым способом у нас получилось создать красивое горизонтальное меню для сайта. Вы можете поиграть с размером и семейством шрифта и подобрать наиболее подходящее решение.

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 29 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 11 комментариев к этой статье:
  • Иван, 18.10.2013 в 00:20

    Меню красивое:)

    Не хватает только активного меню?

  • Лидия05.11.2013 в 12:58

    Спасибо. Меню просто класс. Я бы ещё только добавила бы выпадающее меню)))

  • Олег Астанин
    Олег Астанин05.11.2013 в 23:19

    Тут уже надо подключать JS, но можно и на CSS3 реализовать выпадающий список, а потом каждому пункту меню задать команду!

  • Лидия06.11.2013 в 18:10

    А вы можете показать, а то я уже второй день пытаюсь как то реализовать выпадающие списки. Заранее спасибо.

  • Олег Астанин
    Олег Астанин06.11.2013 в 18:44

    Я еще такого не дела, не изучал эту ветку, да и с JS я не особо лажу. Я об этом писал в некоторых статьях, что не дружу с программированием. А так вы можете поискать (у меня к сожалению нет такой статьи, возможно в ближайшее время напишу, как изучу сам) в поисковых системах «выпадающее меню на CSS3» и посмотреть что есть у других авторов. Возможно найдете решение. Я бы вам помог, но пока не чем. Вы уж извините!

  • Ivanovsku04.12.2013 в 02:19

    Хорошее меню... жаль раньше на наткнулся на ваш блог с этой статьёй... Может быть пригодиться кому-нибудь посоветовать.

  • Олег Астанин
    Олег Астанин04.12.2013 в 02:50

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

  • Vadim23.12.2013 в 02:51

    Как сделать, чтобы меню не смещалось влево при добавлении новых пунктов меню?

    Например, если сделать их 7 вместо 5ти, приходится ставить ul.menu { width:1200px; } , чтобы они остались на одной строчке. И они смещаются влево.

  • Александр Рогачев27.12.2013 в 09:42

    Большое спасибо Олег!

  • Тимофей15.04.2014 в 01:03

    Огромное вам спасибо, Олег!!! :)

  • Олег Астанин
    Олег Астанин15.04.2014 в 10:08

    Пожалуйста!

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

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter