Всех приветствую. Когда-то я писал статью о том, как сделать вертикальную навигацию на сайте, сегодня же поговорим о том, как делается в css горизонтальное меню (адаптивное, на всю ширину экрана и т.д.).
Пролог — как сделать горизонтальное расположение ссылок
Вообще вы же наверняка знаете о том, как создается меню? Хотя бы примерно? Берется тег-контейнер nav, в нем создается маркированный список ul, в нем пункты списка li, а уже в них — сами ссылки. Короче нехилая такая разметочка получается. Сегодня я предлагаю немного упростить задачу — создадим меню по упрошенному варианту, но не менее правильному. Разметка выглядит так:
<nav>
<a href = "#">Париж</a>
<a href = "#">Лондон</a>
<a href = "#">Марсель</a>
<a href = "#">Мадрид</a>
</nav>
То есть просто контейнер nav и в нем ссылки. Посмотрим на результат:
Оп, а наше меню уже горизонтальное, хотя мы еще ничего не сделали. Но дело в том, что для полноценной стилизации ссылок их все-таки придется сделать блочными, поэтому выйдет вот так:
nav a{
display: block;
}
И вот уже наше меню предательски стало вертикальным. Соответственно, тут возникает справедливый вопрос: «Как сохранить блочные свойства ссылок, но при этом расположить их в 1 ряд?» Очень просто, отвечаю я Есть 2 варианта:
Сделать ссылки плавающими блоками. То есть прописать им float: left. Давайте это сделаем, а заодно применим наконец оформление к нашему меню, а то пока смотрится совсем плохо:
nav a{
float: left;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
padding: 8px;
background: #0D0D26;
}
Вот так выглядит теперь навигация:
Второй вариант — вместо float, задать свойство display: inline-block. То есть поменять ссылки с блочных на строчно-блочные. Теперь они будут располагаться в ряд, но при этом не потеряют блочных свойств. При таком варианте между пунктами меню всегда образуется небольшой отступ справа. Чтобы его убрать, обычно применяют к ссылкам margin-right: -4px.
Окей, я буду использовать вариант с флоатами, так как он более простой. Вот вам, по сути, и горизонтальное меню на html и css. В него можно добавить новые пункты, его можно адаптировать, сделать на всю ширину экрана и т.д. Некоторые такие фишки я сейчас опишу.
Добавляем изменение стилей при наведении
У 50-80% менюшек при наведении на пункт меняется цвет текста или шрифта. Разумно сделать это и для нашей навигации.
nav a:hover{
background: #3678A1;
}
Вот так мило это теперь выглядит:
Конечно, можно добавить и другие эффекты. Зависит от вашего желания и знания css.
Адаптируем меню под просмотр на других устройствах
В принципе, адаптировать меню не трудно. Для этого контейнеру nav задайте max-width (максимальную ширину). Когда ширина окна будет становится меньше ширины меню, его размер будет адаптироваться под окно. Но также вам следует следить за тем, чтобы на маленьких экранах пункты меню влезали в одну строку, или хотя бы в две.
Для этого сделайте медиа-запрос на нужном участке. Можно уменьшать размер шрифта, отступы и т.д.
«Для этого контейнеру nav задайте max-width!» — ну и как это сделать?!