Надоело… Вот именно… надоело… мне каждый раз разбираться как работает меню для сайта, чуть-чуть переделывать и забывать. А в следующий раз все по новому. Надоело… Вот и решился я потратить время на разбор строяния простых менющек. Это тема будет интересна новичкам или людям, которые обычно заняты более важными вещами, чем создания какого-то там меню. Я не буду рассматривать мега крутые менишки на CSS3. Я дам основу, на которой любой сможет построить сносное меню за 5 мин. Поехали…

Вместо вступления

В статье Все статьи

Мы будем использовать “стандартную структуру“. Под стандартной структурой я понимаю список вида:

Т.е. меню будет сделано из ненумерованного списка. Особое вниманию обратите на то что тэг ссылки и подменю находятся на одном уровне (<a>  & <ul>).

Эта структура является стандратной. Я видел несколько примеров с дрогой вложенностью и другими элементами. Это экзотика. Как аргумент могу сказать, что WordPress по-умолчанию будет Вам выводить именно такую структуру html.

Еще один момент. В моих примерах я до последнего не буду использовать какие-либо классы. Т.е. все CSS стили будут длинными и некрасивыми. Основной причиной почему я так делаю является, то что мне надоело каждый раз ковыряться в коде для того чтобы поменять семантику списка только для того чтобы посмотреть как то или иное меню будет выглядеть у меня на сайте. Я ленивый. Я хочу скопировать код, максимум поменять 1 class (основной, чтобы CSS знал где вообще меню начинается) и чтобы все заработало. Вот такой я привередливый… привередливый и аскетичен. Все мои примеры будут некрасивые. Всякие рюшечки в виде градиентной заливки, плавного выделения и другие радости жизни Вы можете подсмотреть у более опытных разработчиков. Тут будет hardcode. Я хочу показать Вам осовную идею, а за всякими там красивостями иногда бывает трудно разглядеть суть.

А начнем мы с Вами с верхнего меню. Для начала попробуем сделать одноуровневое меню. На данный момент я знаю 2 способа формирования верхнего меню. А именно

  • inline-block
  • float

display: inline-block (example_1::github)

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

HTML

CSS

Ну вот в принципе и все. Я бы мог на этом остановиться, но хочется остановиться на свойстве display. У него есть еще один очен похожий параметр: inline. И на первый раз кажется, что нету никакой разницы. Но она есть. Ее очень хорошо видно, если добавить padding сверху\снизу и border (как у меня). Раскомментируйте display:inline и обновите страницу.

Как говориться: “Почувствуйте разницу”

inline – делает элементы строчными (у строчных элементов нельзя задать вертикальный padding)

inline-block – сочетаем в себе плюсы строчных и блочных элементов, но привносит свою особенность: появляются пробелы между элементами меню. Теперь элементы имеют ширину в зависимости от контента (как строчные) и им можно задавать вертикальные padding (как для блочных)

Итог:

(+) Самый простой способ

(-) Пробелы между элементами

Существует 3 способа решения проблемы с пробелами (каждый последующий хуже предыдущего):

Вы удаляете все знаки табуляции, переноса коретки в разметке;

При помощи CSS делаете размер шрифта между элементами равным нулю (ширина пробела зависит от размера шрифта);

Добавляете отрицательный margin.

Чтобы не выбирать между плохим и еще хуже, предлагаю воспользоваться хорошим вариантом

float: left (example_2::github)

Переходим к более интересному варианту. Вместо dipslay будет использовать свойство float:left. Если, вы захотите использовать float: left, то вам обязательно нужно будет добавить в конце hack для “выключения” float. Его обычно называют clearfix.

Это может быть пустой div, но это нарушит разметку, поэтому обычно используют псевдо элемент :after

“Зачем нам этот clearfix?” – спросите Вы. А фишка в том, что пока вы не добавите это меню на свой сайт, то вы не заметите одной особенности. Что float распростараняется на все элементы, и даже на контент идущий после меню. Чтобы не было сюрпризов оттого, что нужно править код в моих примерах всегда присутсвует контент.

Итог

(+) Нету пробелов

(-) Необходимо добавлять clearfix

Автор предпочитал данный вариант меню пока не начал разбираться в этой проблеме.

FlexBox (example_3::github)

CSS3 принес нам много радостей. Одной из них стал flexbox. Честно скажу, что познакомился я с ним только во время написания этой статьи, так что кое-что могу и пропустить… не обессудьте. Очень хорошо написано о FlexBox здесь. Прочитали? Тогда поехали

Как видите, нового не много и код чистый. Без всяких там clearfix’ов. Если закомментировать flex-wrap, то все элементы будут располагаться всегда в 1 строку и сжиматься при уменьшении экрана монитора. Буду изучать это свойство и дальше, пока никаких изъянов в ней не заметил.