От автора: приветствую вас на нашем блоге, дорогие читатели. Сегодня я предлагаю вам сделать в html меню для сайта. Css нам тоже в этом деле поможет – с его помощью мы оформим нашу навигацию.
Вертикальное меню
Первым делом давайте попробуем сделать вертикальную навигацию, так как сегодня она очень распространена на многих сайтах. В основном ее делают с помощью списка, но в html5 появился специальный тег для важных ссылок на странице – nav. В него мы и обернем наш список. Итак, разметка:
|
1 2 3 4 5 6 7 8 9 |
<nav class = "main-menu"> <ul> <li><a href = "#">1</a></li> <li><a href = "#">2</a></li> <li><a href = "#">3</a></li> <li><a href = "#">4</a></li> <li><a href = "#">5</a></li> </ul> </nav> |
Сразу же наше меню получило свой уникальный стилевой класс, чтобы мы могли вернуться к его оформлению. Также в каждый пункт списка нужно вписать еще и ссылку, потому на реальном сайте эти пункты кликабельны. Конечно, в нашем случае это просто пустые ссылки.
Приступаем к оформлению
Пока наша навигация выглядит очень невзрачно. Приступаем сразу же к его оформлению. Первым делом, нужно убрать маркеры у пунктов списка, также нужно убрать подчеркивания у ссылок и изменить их цвет.
|
1 2 3 4 5 6 7 8 9 10 11 |
.main-menu ul{ list-style: none; margin: 0; padding: 0; } .main-menu li a{ text-decoration: none; color: black; display: block; padding: 25px; } |
Кроме этого, мы превратили ссылки в блочные элементы, так как именно к ним будут применяться все стили для определения внешнего вида. Сразу же дадим внутренние отступы, чтобы наш блок увеличился в размерах. Теперь необязательно наводить именно на слова для перехода, поскольку элемент стал блочным и переход произойдет, даже если нажимать на пустые места в блоках.
Если вам необходимо, то вы можете добавить произвольные цвета фона к ссылкам, чтобы оформление не выглядело слишком скучным. Конечные стили в нашем случае выглядят так:
|
1 2 3 4 5 6 7 8 9 |
.main-menu li a{ text-decoration: none; color: black; display: block; padding: 10px 25px; background: #75CB62; border: 1px solid brown; width: 70px; } |
Переопределим немного отступы, зададим фон и рамку, и, самое главное, нужно задать ширину, потому что без этого свойства наши блоки будут растягиваться на всю ширину окна, что не есть хорошо. Теперь наша навигация выглядит так:
По желанию можно добавить внутрь какие-нибудь иконки, изменить сам шрифт, также можно добавить изменение цвета фона при наведении на пункты.
|
1 2 3 |
.main-menu li a:hover{ background: #53C653 } |
Вот так вот и делается вертикальное меню для сайта на css, а еще его очень легко преобразовать в горизонтальное, что мы сейчас и сделаем.
Горизонтальное меню
Собственно, из уже получившегося меню можно легко сделать горизонтальное. Для этого всего лишь нужно записать:
|
1 2 3 |
.main-menu ul li{ display: inline-block; } |
Однако если преобразовать пункты списка в блочно-строчные, то между ними образуется небольшой отступ справа. Он равен четырем пикселям, поэтому если вы хотите от него избавиться, то нужно задать отрицательный margin:
|
1 |
margin-right: -4px; |
Можно поступить и по-другому: не использовать свойство display, а отправить все блоки влево с помощью float: left, тогда никаких отступов между пунктами и не будет.
Как сделать выпадающее меню для сайта
Давайте оставим inline-block, дописав отрицательный отступ справа и реализуем для первого пункта раскрывающееся подменю с тремя пунктами. Для этого нам придется изменить для пунктов списка правило:
|
1 2 3 4 |
.main-menu ul > li{ display: inline-block; margin-right: -4px; } |
Указав перед li знак больше мы говорим браузеру, чтобы он применил свойство только к непосредственно вложенным пунктам списка. Новая разметка выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<nav class = "main-menu"> <ul> <li><a class = "dropdown" href = "#">Пункт 1</a> <ul class = "sub-menu"> <li><a href = "#">Подпункт 1</a></li> <li><a href = "#">Подпункт 2</a></li> <li><a href = "#">Подпункт 3</a></li> </ul> </li> <li><a href = "#">Пункт 2</a></li> <li><a href = "#">Пункт 3</a></li> <li><a href = "#">Пункт 4</a></li> <li><a href = "#">Пункт 5</a></li> </ul> </nav> |
Как видите, мы добавили вложенный список в первый пункт и добавили к нему класс. Добавим такие стили, чтобы окончательно оформить наши меню.
|
1 2 3 4 5 6 7 8 9 10 |
.main-menu ul > li{ display: inline-block; position: relative; margin-right: -4px; } .sub-menu{ margin: 0; padding: 0; position: absolute; } |
Мы задали абсолютное позиционирование нашей вложенной навигации, чтобы она выпала из потока. Также заметьте, что первой ссылке задан класс dropdown. Это для того, чтобы задать картинку-фон, которая показывала бы, что меню выпадающее.
Вот такую картинку мы поставим в фон ссылке.
|
1 2 3 |
.main-menu .dropdown{ background:#75CB62 url(arrow.png) no-repeat 80% 50%; } |
Почти готово! Пока что наше подменю видно на странице, нужно его скрыть с помощью display: none. Осталось прописать вот такой вот не самый понятный селектор:
|
1 2 3 |
.main-menu .dropdown:hover ~ .sub-menu{ display: block; } |
Тут мы сначала указываем, что стили будут применены, когда мы наведем на элемент с классом dropdown (а это наш первый пункт), но применяться они не к самой ссылке, а к нашему подменю. Это возможно благодаря тому, что мы поставили знак ~ и дописали после него нужный селектор.
По сути, этот селектор говорит браузеру следующее: при наведении на dropdown сделай видимым элемент sub-menu, который находиться в разметке где-то дальше.
Если вдруг нам какой-то другой пункт тоже нужно будет сделать выпадающим, то просто допишем для него класс dropdown, создадим внутри него свой список .sub-menu и все будет работать.
Вот такой вот не совсем обычный, но достаточно интересный способ реализовать выпадающее меню у одного или нескольких пунктов.
Ну а как реализовать адаптивное меню для сайта на css? Для этого достаточно будет прописать определенные медиа-запросы, чтобы стили менялись при изменении ширины экрана. Подробно вопрос адаптивности вы сможете изучить в курсе по практике верстки под мобильные устройства.
На этом я на сегодня с вами прощаюсь. Желаю вам удачного изучения веб-технологий.
Комментарии (1)