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

Как сверстать простое горизонтальное меню на CSS

  • 5, Май, 2015

Итак, приступим.

Базовая разметка

Разметка нашей страницы с меню будет стандартной, и без излишеств. Единственное, чтобы наша страница не казалась пустой, я добавил стих Иосифа Бродского — Не выходи из комнаты.

Как видите — абсолютно стандартная разметка меню. В итоге мы получаем:

меню без css

Не особо видно, что это горизонтальное меню. Но мы конечно же добавим CSS к нашему меню.

Стилизуем меню с помощью CSS

К самым ключевым строчкам, в стилизации меню, я добавил комментарии, которые подробно рассказывают, что именно мы прописываем.

Единственно хочу добавить, главное что делает горизонтальное меню горизонтальным это строка float:left в контейнере nav>ul>li. Если не прописать это свойство то меню будет вертикальным.

В итоге у нас получается такой вид меню:

See the Pen menu_horizontal by Vian142 (@Vian142) on CodePen.

Горизонтальное меню написано. В принципе этого достаточно, но что нужно сделать, чтобы меню выравнивалось по центру страницы? Давайте рассмотрим такой вариант.

Выравниваем горизонтальное меню по центру

Общий принцип такой:

Сдвигаем содержимое списка ul с помощью свойств:

  • float:left;
  • left:50%;

Центрируем меню, сдвигая пункты li меню:

  • left: -50%;

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

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

Для того, чтобы избежать этого ненужного недоразумения, пропишем родительскому контейнеру списка, а именно nav, свойство overflow: hidden. С помощью этого свойства мы скрываем всё содержимое, которое выходит за его границы.

Итог

See the Pen horizontal_center_menu by Vian142 (@Vian142) on CodePen.

Как видите, написать меню, для простого сайта, не так уж и сложно. А центрировать его еще легче. Надеюсь вам пригодиться данный урок.