Меню для сайта на css: оформление навигации сайта

Меню для сайта на css: оформление навигации сайта

От автора: приветствую вас на нашем блоге, дорогие читатели. Сегодня я предлагаю вам сделать в html меню для сайта. Css нам тоже в этом деле поможет – с его помощью мы оформим нашу навигацию.

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

Первым делом давайте попробуем сделать вертикальную навигацию, так как сегодня она очень распространена на многих сайтах. В основном ее делают с помощью списка, но в html5 появился специальный тег для важных ссылок на странице – nav. В него мы и обернем наш список. Итак, разметка:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Приступаем к оформлению

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

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

Если вам необходимо, то вы можете добавить произвольные цвета фона к ссылкам, чтобы оформление не выглядело слишком скучным. Конечные стили в нашем случае выглядят так:

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

По желанию можно добавить внутрь какие-нибудь иконки, изменить сам шрифт, также можно добавить изменение цвета фона при наведении на пункты.

Вот так вот и делается вертикальное меню для сайта на css, а еще его очень легко преобразовать в горизонтальное, что мы сейчас и сделаем.

Горизонтальное меню

Собственно, из уже получившегося меню можно легко сделать горизонтальное. Для этого всего лишь нужно записать:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Можно поступить и по-другому: не использовать свойство display, а отправить все блоки влево с помощью float: left, тогда никаких отступов между пунктами и не будет.

Как сделать выпадающее меню для сайта

Давайте оставим inline-block, дописав отрицательный отступ справа и реализуем для первого пункта раскрывающееся подменю с тремя пунктами. Для этого нам придется изменить для пунктов списка правило:

Указав перед li знак больше мы говорим браузеру, чтобы он применил свойство только к непосредственно вложенным пунктам списка. Новая разметка выглядит так:

Как видите, мы добавили вложенный список в первый пункт и добавили к нему класс. Добавим такие стили, чтобы окончательно оформить наши меню.

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

Вот такую картинку мы поставим в фон ссылке.

Почти готово! Пока что наше подменю видно на странице, нужно его скрыть с помощью display: none. Осталось прописать вот такой вот не самый понятный селектор:

Тут мы сначала указываем, что стили будут применены, когда мы наведем на элемент с классом dropdown (а это наш первый пункт), но применяться они не к самой ссылке, а к нашему подменю. Это возможно благодаря тому, что мы поставили знак ~ и дописали после него нужный селектор.

По сути, этот селектор говорит браузеру следующее: при наведении на dropdown сделай видимым элемент sub-menu, который находиться в разметке где-то дальше.

Если вдруг нам какой-то другой пункт тоже нужно будет сделать выпадающим, то просто допишем для него класс dropdown, создадим внутри него свой список .sub-menu и все будет работать.

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

Ну а как реализовать адаптивное меню для сайта на css? Для этого достаточно будет прописать определенные медиа-запросы, чтобы стили менялись при изменении ширины экрана. Подробно вопрос адаптивности вы сможете изучить в курсе по практике верстки под мобильные устройства.

На этом я на сегодня с вами прощаюсь. Желаю вам удачного изучения веб-технологий.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

Комментарии (1)

  1. Макс

    получилось, что при указанном способе подменю исчезало, когда я на него пытался навести:
    .my-menu .dropdown:hover ~ .sub-menu{
    display: block;
    }
    попробовал так:
    li:hover ul{
    display: block;
    }
    и проблема исчезла.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree