как создать горизонтальное меню в html

Горизонтальное меню для сайта

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента

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

Как сделать горизонтальное меню: разметка и примеры оформления

HTML-разметка и базовые стили для горизонтального меню

HTML разметка для горизонтальной навигации

Существует несколько способов разместить их горизонтально. Для начала нужно сбросить стили браузера по умолчанию для элементов навигации:

See the Pen GJxayB by Elena Nazarova (@nazarelen) on CodePen.

Способ 1. li

Способ 2. li

Делаем элементы списка плавающими. В результате они располагаются по горизонтали. Высота блока-контейнера ul становится равной нулю. Чтобы решить эту проблему, добавляем для ul , расширяя его и позволяя ему таким образом содержать плавающие элементы. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 3. li

Делаем элементы списка строчно-блочными. Они располагаются по горизонтали, с правой стороны образуется промежуток, как и в первом случае. Для ссылок добавляем a и стилизуем их по своему желанию.

Способ 4. ul

Делаем список ul гибким контейнером с помощью модели CSS3 flexbox. В результате элементы списка располагаются горизонтально. Добавляем для ссылок a и стилизуем их по своему желанию.

Источник

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

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

И еще один момент. Во всех примерах вам будет попадаться пункт меню с class= «current» (текущий), который не содержит ссылку. Он является демонстрационным и обозначает то, как должен выглядеть пункт меню, который соответствует той странице, на которой находится пользователь. Дело в том, что в интернете хорошим тоном считается отсутствие ссылок на странице, которые ссылаются на нее саму и, кстати, об этом же говорят представители поисковиков (Яндекс, Google и т.д.).

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

Самое простое горизонтальное меню без каких-либо изысков.

Пример HTML и CSS: простое горизонтальное меню

Описание примера

Блочное горизонтальное меню (float)

В этом меню ссылки представляют собой блоки, у которых можно изменять ширину и высоту, если это необходимо.

Пример HTML и CSS: блочное горизонтальное меню с float

Описание примера

Так как пункты меню у нас всплывают влево, то HTML-элементы, которые будут находиться ниже навигации, смогут также ее обтечь. Чтобы этого не произошло, можно сделать прерывание обтекания с помощью свойства CSS clear или установить у блока с class= «menu» такую высоту, которая гарантированно будет больше высоты ссылок.

Блочное горизонтальное меню (display)

Сделаем еще одно блочное меню, но немного другим способом.

Пример HTML и CSS: блочное горизонтальное меню с display

Описание примера

Горизонтальное меню с вкладками

Давайте немного изменим наш предыдущий пример и сделаем меню, которое будет похоже на вкладки. Подобные вещи довольно часто используются на сайтах.

Пример HTML и CSS: блочное горизонтальное меню с вкладками

Описание примера

Этот пример похож на предыдущий, поэтому рассмотрим только отличия.

Источник

CSS меню

Вертикальное меню

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:

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

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

Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:

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

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

Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:

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

Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:

Выпадающее меню

Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.

Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:

Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.

Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.

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

Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:

Источник

Создание и оформление меню

Основы верстки

Код простейшего меню будет выглядеть так:

Примечание

— Куда?
— В css-файл!
— В какой?

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

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

Необходимо создать классы, и прописывать стили уже для них. Потому что если задавать стили непосредственно для тегов, например:

то это правило будет распространяться и на все ссылки, включенные в списки за пределами меню! Кроме того, на сайте может быть несколько меню различного оформления.

Каким тегам нужно присваивать классы

Хороший вопрос. Для начала, неплохо создать дополнительный контейнер-обертку и присвоить класс ему.

При этом всегда надо держать в уме, что навигационный блок находится в определенном внешнем блоке сайта и его местоположение и некоторые свойства, например связанные с внешними отступами или направлением выпадения подменю (подробнее об этом в материале «Выпадающее меню») зависят от внешних классов глобальной разметки сайта.

Какие имена должны быть у классов

Первый отвечает за цветовое оформление всех элементов и, в тоже время, дает понять что относится к меню.
Второй идентифицирует список как собственно меню.

Внимание!

Старайтесь выбирать имена для классов не только внятные, но и уникальные. В противном случае они могут конфликтовать с уже существующими классами.

Группировка стилей по классам

На самом деле, все очень просто. Изначально, на этапе создания нужно группировать стили тематически и включать их в соответствующие классы.

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Избавляемся от стилей для списков, назначенных браузером (или шаблоном) по умолчанию.

Здесь же можно задать размеры и другие свойства шрифта, если они отличаются от основных.

Цветовое оформление

Прежде чем прописывать стили, составляем список объектов к которым обычно применяется цветовое оформление:

Примечание

На практике не обязательно применять все стили, достаточно лишь некоторые. Например при наведении иногда достаточно изменение только цвета ссылки или добавить подчеркивание.

Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!

Выпадающее меню (многоуровневое)

До этого момента рассматривалось простое одноуровневое меню. Как показывает практика, очень часто, через какое-то время возникает необходимость к одному или нескольким основным пунктам добавить подпункты. Поэтому:

Изначально любое меню нужно создавать как многоуровневое!

В многоуровневом меню один или несколько пунктов могут содержать вложенные меню с подпунктами, которое в исходном состоянии скрыто (не обязательно, но будем рассматривать именно этот вариант). При наведении на родительский пункт осуществляется вывод подменю.

За основу взят код предыдущего примера. К одному из пунтков добавлен вложенный список второго уровня.

HTML-код 2-х уровневого меню:

Разбиваем на несколько этапов:

Цветовое оформление

Чтобы не усложнять код, размеры и отступы оставлены те же, что и в основном меню.

Позиционирование и скрытие

Вывод

Информация

Подменю выпадающеее влево

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

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

Я не стал добавлять специальный класс для эффектов анимации, потому что, как вы ниже сами увидите, все делается очень просто путем добавление нескольких строчек кода css к уже существующим классам.

Использован упрощенный синтаксис. Также добавлены нестандартные свойства для различных типов браузеров.

Переопределение существующих стилей:

Скрытие подменю. Вариант 2

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

Раздвижное меню-аккордеон

Несколько слов вступления

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

Группирование позволяет установить группу свойств сразу для нескольких селекторов и классов, что делает код более читабельным.

После этого добавим стили, для закрытого и раскрытого аккордеона:

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

По структуре горизонтальное меню ни чем не отличается от вертикального, html-код одинаковый. Теоретически, получить горизонтальное меню из вертикального можно заменой/добавлением класса содержащего контейнера.

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

В итоге наше меню будет выглядеть так:

За основу возьмем код вертикального выпадающего меню и заменим классы:

Разметка

Что было сделано:

Пояснения:

Разметка выпадающего меню

Рассмотрим некоторые особенности:

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

Для выделения активного пункта меню была применена тень.

На этом цветовое оформление можно считать завершенным. Теперь с легкостью можно подкорректировать цветовую гамму, или создать несколько классов для разных вариантов оформления.

Дополнительно

Источник

Горизонтальное выпадающее меню

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

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

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

Способ 1.

Способ 2.

Способ 3.

Способ 4.

Способ 5. С помощью jQuery

2. 3D выпадающее меню

Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

3. Разворачивающееся выпадающее меню с логотипом

В этом примере в верхнем разделе страницы расположены логотип и навигация по сайту. В качестве логотипа может быть картинка или текст. Выпадающее меню постепенно разворачивается из-под элемента верхнего списка с помощью функции CSS3-трансформации.

4. Увеличивающееся выпадающее меню

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

Чтобы сделать меню адаптивным, используем медиа-запросы. В данном примере возьмем переломную точку 600 пикселей, то есть, если разрешение экрана больше 600 пикселей, меню будет горизонтальным, если меньше — то вертикальным.

5. Подъезжающее выпадающее меню

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

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

Источник