8:28
Автор: Рубрика: CSS-рецепты 2 комментария

Как делать в css горизонтальное меню (адаптивное)?

Всех приветствую. Когда-то я писал статью о том, как сделать вертикальную навигацию на сайте, сегодня же поговорим о том, как делается в css горизонтальное меню (адаптивное, на всю ширину экрана и т.д.).

Пролог — как сделать горизонтальное расположение ссылок

Вообще вы же наверняка знаете о том, как создается меню? Хотя бы примерно? Берется тег-контейнер nav, в нем создается маркированный список ul, в нем пункты списка li, а уже в них — сами ссылки. Короче нехилая такая разметочка получается. Сегодня я предлагаю немного упростить задачу — создадим меню по упрошенному варианту, но не менее правильному. Разметка выглядит так:

<nav>
<a href = "#">Париж</a>
<a href = "#">Лондон</a>
<a href = "#">Марсель</a>
<a href = "#">Мадрид</a>
</nav>

То есть просто контейнер nav и в нем ссылки. Посмотрим на результат:
пролог

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

nav a{
display: block;
}

блочные ссылки

И вот уже наше меню предательски стало вертикальным. Соответственно, тут возникает справедливый вопрос: «Как сохранить блочные свойства ссылок, но при этом расположить их в 1 ряд?» Очень просто, отвечаю я smile Есть 2 варианта:
Сделать ссылки плавающими блоками. То есть прописать им float: left. Давайте это сделаем, а заодно применим наконец оформление к нашему меню, а то пока смотрится совсем плохо:

nav a{
float: left;
color: #fff;
text-decoration: none;
border-right: 1px solid #fff;
padding: 8px;
background: #0D0D26;
}

Вот так выглядит теперь навигация:
float

Второй вариант — вместо float, задать свойство display: inline-block. То есть поменять ссылки с блочных на строчно-блочные. Теперь они будут располагаться в ряд, но при этом не потеряют блочных свойств. При таком варианте между пунктами меню всегда образуется небольшой отступ справа. Чтобы его убрать, обычно применяют к ссылкам margin-right: -4px.

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Окей, я буду использовать вариант с флоатами, так как он более простой. Вот вам, по сути, и горизонтальное меню на html и css. В него можно добавить новые пункты, его можно адаптировать, сделать на всю ширину экрана и т.д. Некоторые такие фишки я сейчас опишу.

Добавляем изменение стилей при наведении

У 50-80% менюшек при наведении на пункт меняется цвет текста или шрифта. Разумно сделать это и для нашей навигации.

nav a:hover{
background: #3678A1;
}

Вот так мило это теперь выглядит:
при наведении

Конечно, можно добавить и другие эффекты. Зависит от вашего желания и знания css.

Адаптируем меню под просмотр на других устройствах

В принципе, адаптировать меню не трудно. Для этого контейнеру nav задайте max-width (максимальную ширину). Когда ширина окна будет становится меньше ширины меню, его размер будет адаптироваться под окно. Но также вам следует следить за тем, чтобы на маленьких экранах пункты меню влезали в одну строку, или хотя бы в две.

Для этого сделайте медиа-запрос на нужном участке. Можно уменьшать размер шрифта, отступы и т.д.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

2 комментария
  • Андрей

    «Для этого контейнеру nav задайте max-width!» — ну и как это сделать?!

    2016-12-31 в 12:48 | Ответить
    • Михаил

      nav{max-width:XXpx}

      2016-12-31 в 12:51 | Ответить