как разместить меню горизонтально
Горизонтальное меню для сайта на HTML+CSS
Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.
HTML-код для горизонтального меню
Когда-то давно главное меню для сайта делали на картинках, таблицах, флэше и возможно на чем-то еще, но в наше время существует самый популярный и он же правильный метод создания меню используя теги «списка».
Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.
Пример использования html тегов для создания меню в коде ниже:
Стандартные CSS стили для горизонтального меню
Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.
Пример каркаса (шаблона) вашего будущего меню
Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.
Примеры красивого горизонтального меню для сайта
Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.
Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже
Простое меню синего цвета с раздельными пунктами
CSS стили «верхнего» меню
Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.
Главное меню, расположенное на цветной линии с красным фоном
CSS стили меню на цветной линии
Выпадающее меню на HTML+CSS
Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».
Пример создания простого выпадающего меню
HTML код выпадающего меню
Стили CSS выпадающего меню
А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: составление структуры и семантического ядра.
Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте: 
Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.
Благодарю за внимание.
спасибо огромное! коротко, ясно и работает. все что нужно нашел.
А как по центру страницы сделать меню? все перепробывал((
Вам нужно сделать подобную конструкцию:
Ну у меня не получается. Такое ощущение что в примере нет подключения к css файлу, на странице все отображается как текст, без оформления.
В примере — встроенные интерактивные меню, там CSS подключается к html странице автоматически. Вам же необходимо либо прописать CSS прямо в html коде при помощи конструкции:
Либо (что более правильно) создать отдельный файл CSS и на вашей странице подключить данный файл.
Я создал отдельную папку css. Я новичок, может что спрашиваю не корректно, Буду пробовать подключать.
Если у вас отдельная папка, а в ней находится ваш файл CSS, то необходимо на вашей HTML странице в добавить строчку
Таким образом вы подключите файл со стилями к вашей HTML-странице
Разумеется, вам нужно заменить ВАША_ПАПКА и ВАШ_ФАЙЛ_СО_СТИЛЯМИ на существующие названия документов.
Очень помогли, спасибо большое
классный сайт, все наглядно и по полочкам.
Теперь всё ясно. СПС!
Здравствуйте. Только начинаю изучать программу. Спасибо за подсказки. Есть один вопросик. Как сделать по центру МЕНЮ если там у меня страниц много например 15
Отображется в две строки но не центрируется в браузере. экспорт был сделан просто в шаблон сайта.
Приветствую, вероятнее всего вам необходимо задать свойства css для родительского элемента меню
text-align:center;
margin: 0 auto;
День добрый, использовал ваш пример «Главное меню, расположенное на цветной линии с красным фоном» вставил в div блок настроил все хорошо, но отключение переноса и маркеров списков перенеслось по умолчанию в другие div блоки. Делал все через таблицу стилей с отдельным файлом css, как можно исправить чтоб отключение списков и маркеров работало только в одном div блоке?
Добрый
Вам необходимо задать родительскому div, в котором находится ваше меню какой-то класс, например menu, т.е. это будет выглядеть так:
Ссылки не кликабельные получаются почему-то.
В данном примере ссылки указаны в формате
для того, чтобы не было некорректных переходов. Вам необходимо поставить свои актуальные ссылки, например
здравствуйте!не получается сделать выпадающее меню,его видно постоянно…что не так?подскажите пожалуйста. заранее спасибо
Приветствую, у вас определенно проблема в том, что стили меню перекрываются, а именно — вот эта часть
Для того, чтобы это исправить, вы можете, например, поставить для родительского тега div, который оборачивает меню, новый класс. Допустим это будет new-menu. После чего проставьте перед нужным стилем ваш новый класс, т.е. в данном случае это будет
спасибо, я просто не внимательна-допустила ошибку…
А как осуществить переход в конкретное место при нажатии?
Вам нужно вместо href=»#» писать адрес своих страниц. Например, href=»/contacts»
Вставила код меню в свой сайт. После этого все ссылки сайта отображаются в виде блоков, как блоки меню
Приветствую. У вас подобная проблема, что уже описывалась в комментариях. Вам нужно задать родительскому div, в котором находится ваше меню какой-то класс, например menu, тогда это будет похоже на:
Спасибо! Стало понятно! 🙂
А после чего писать все эти стили и куда?
Стили вы можете вставить как в саму страницу (что в body, что в head, но правильней вставить отдельный css-файл. Если вы работает с CMS, то такой у вас наверняка есть.
А как так вышло что маркерный список превратился в меню? В чём секрет? Я в восторге!
Сделал выпадающее меню, оно состоит из двух элементов. Проблема в том что первый элемент списка отображается нормально, а второй прозрачным и окрашивается только после наведения.
CSS меню
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
Горизонтально центрированное меню с использованием только CSS
Задача центрирования горизонтального меню может оказаться не такой уж простой, особенно для новичков в CSS. Поиск решений приводит к весьма ограниченному списку методов, основная часть которых полагается на трюки CSS, JavaScript или использование нестандартных правил, которые поддерживаются не всеми браузерами. В данном уроке мы разберем метод центрирования горизонтального меню, который использует только стандартные правила CSS и работает во всех браузерах.
Пример центрированного меню
Ниже приведено горизонтальное центрированное в данной колонке меню, в котором активизирована вторая закладка. Можно попробовать изменить размер окна браузера или страницы, чтобы убедиться в том, что меню всегда остается центрированным и рабочим.
На демонстрационной странице можно увидеть несколько вариантов оформления горизонтально центрированного меню. Любой из них можно использовать в своих проектах.
Разметка HTML
Все меню, примеры которых приводятся в данном уроке, используют простую структуру. Это обыкновенный неупорядоченный список ссылок, помещенный в элемент div.
Код CSS центрированного меню
Ниже приводится полный код CSS, с помощью которого центрируется меню. А объяснения принципа работы приводятся далее в уроке.
Как работает метод центрирования
Действие метода основано на относительном позиционировании плавающих блочных элементов один в другом. Для начала посмотрим, как изменяется размер элементов при смещении.
Элемент div без смещения
Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.
Элемент div со смещением влево
Но если мы будем смещать элемент div влево, он автоматически будет ужиматься до размеров своего содержимого. Сжатие является ключевым моментом в реализации данного метода центрирования меню. Оно помогает перемещать меню в правильную позицию.
Стандартное выровненное влево меню
Возьмем стандартное выровненное влево меню и будем шаг за шагом его переделывать. Для наглядности пункты окрашены в разные цвета, так что сразу понятно, что куда вложено.
Обратите внимание на следующие моменты:
Смещаем положение неупорядоченного списка
Сдвигаем положение всех элементов меню
Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.
Несколько важных замечаний
При использовании данного метода центрирования надо помнить о нескольких важных моментах:
Заключение
Предложенное решение совместимо со всеми браузерами, не использует JavaScript и поддерживает изменяемый размер текста.
Горизонтальные меню, несколько советов
Горизонтальные меню – пожалуй, самый популярный вид навигации в веб-дизайне. Можно с уверенностью сказать, что на сегодняшний день большинство сайтов используют такой тип меню с целью упрощения просмотра страниц.
Тем не менее, в современном веб-дизайне очень много видов горизонтальных меню. Некоторые предлагают преимущества в удобстве использования для определенных типов сайтов, а другие эстетически лучше смотрятся.
В этой статье мы сосредоточимся на множестве подходов и практик с тем, чтобы убедиться в простоте использования горизонтальных меню, а также отметим некоторые, менее эффективные, решения. Также, мы обратим внимание на парочку тенденций, которые, возможно, помогут разработчикам в работе над горизонтальными меню в будущих проектах.
Используйте хорошо известные имена для ссылок
Давайте начнем с удобства и простоты использования любого навигационного меню. Когда пользователь посещает новый сайт, меню будет одной из первых вещей, на которые он осмысленно обратит внимание. Если этот элемент будет хорошо оформлен, пользователь обратится к нему за помощью для решения своей задачи. Почти каждый веб-сайт имеет определенные секции, которые «ожидаются» пользователями, к примеру «О нас», «Услуги», «Продукты» или «Связь с нами».
По самой природе Веба, пользователи будут недовольны любой задержкой из-за непонятной навигации, если они не могут немедленно найти необходимые данные.
Так, ссылка на страницу «О нас» должна быть названа «О нас» [Спасибо, Кэп – прим. переводчика] или «Контакты», ссылка на раздел услуг – названа «Услуги» или «Наши услуги»
Излишнее творчество в процессе именования пунктов главного меню может привести к потере в удобстве для вашего пользователя. 
Impulse Development
Меню этого сайта не создает лишних проблем с навигацией
Даже при самых необычных обстоятельствах, не называйте страницу с предоставляемыми услугами – «То, чем мы занимаемся». И не нужно называть страницу с контактами «Способы нас найти». В поисках информации, пользователи пытаются найти знакомые слова и, первое время, неосознанно избегают незнакомых или непонятных слов и словосочетаний.
Четко определяйте главные и второстепенные секции
Как только вы выяснили, какие части вашего сайта являются главными, а какие второстепенными, по важности для потенциального пользователя, вы уже можете визуально создать иерархическую структуру меню, которая увеличит удобство и простоту использования вашего сайта.
Важные ссылки (например «Услуги», «Контакты», и т.д.) должны четко отличаться от второстепенных. Работа дизайнера состоит в том, что бы по возможности разделить все навигационные ссылки на две этих категории и ясно указать на их различия пользователям.
Рассмотрим несколько примеров: 
Edwards & Hampson
Аналогичный пример: 
Deliciouslyorkshire
Ссылки на сайте The Deliciouslyorkshire, ведущие к важным разделам («Home», «About»,«News and events», «Recipes») расположены рядом с теми, что, казалось бы, является вторичными секциями ( «Promotions», «Useful links»). Оба типа ссылок имеют вид закладок, без признаков иерархии.
Фактически, если некоторые из этих ссылок менее важны для посетителей сайта, то проектирование секций с отражением иерархии было бы мудрым решением. Конечно, у этих компаний могли быть веские причины именно так спроектировать свои меню, и это не обязательно плохой пример, скорее всего, это просто исключения, иллюстрирующие важность визуальной иерархии.
Вот два примера сайтов, которые подчеркивают иерархию, при этом оставляя менее важные ссылки легкодоступными: 
Designers Couch
У Designers Couch есть важные навигационные ссылки в главном меню («Home», «Gallery», «Jobs» и т.д.), а также вторичные ссылки на этом же самом меню, но сохраняющие визуальные отличия («Find a designer», «Get involved»). 
J Taylor Design
Дизайнер сайта J Taylor Design подчеркивает различие между главными и зависимыми пунктами тем, что помещает вторичные ссылки ниже главного меню, используя другой цвет, шрифт и размер. В этом примере пользователь не сталкивается с проблемой, различая первичные и вторичные секции.
Помещайте ссылки на действия пользователя вправо
Если вы разрабатываете сайт, позволяющий регистрироваться пользователям, или коммерческий сайт, у которого есть «Корзина» для покупки товара, то будет лучше, если вы поместите ссылки с этими секциями справа от меню (или в другом месте справа, вверху). [Например, как это сделал Хабр :)] Здесь нет никакого шаманства или парапсихологии, вроде «Логотипы в правом углу воспринимаются на 45,9% лучше, чем в левом», просто пользователи привыкли к такому расположению.
Вот несколько примеров сайтов, которые визуально отделяют ссылки на действия в главном меню. 
Xero 
Sharify
Sharify и Xero помещают свои ссылки на действия в то же меню, что и важные ссылки, но они сохраняют иерархию, располагая их справа, на некотором отдалении.
Строка поиска, как часть меню
Другой метод, улучшающий простоту и удобство – это установка поиска справа, как часть меню. Поиск аналогичен всем функциям, упомянутым ранее, поэтому он требует специфического подхода.
Раз пользователи привыкли видеть ориентированные на действие возможности, включая окно поиска, на правой части страницы, так оставьте место в этой части вашего сайта и для строки поиска, если такое возможно.
Несколько примеров такого расположения поиска (включая вышеупомянутый J Taylor Design):
Washtenaw Community College 
Westcoast Poppin
Избегайте ВНЕЗАПНО выпадающих меню
Выпадающие меню достаточно распространены в современном дизайне, благодаря своей способности справляться с нагромождением ссылок. Однако, следует наглядно сообщать пользователю, раскроется ли меню при наведении на него курсора мыши. Лучше всего это сделать с помощью небольшого указывающего вниз треугольника или стрелки.
Рассмотрим несколько примеров, следующих этому совету: 
QN5 Music 
Kinder-aktuell
К сожалению, не все сайты сигнализируют пользователю о выпадающих меню. 
webstudios 
billoneil.com
Различные тенденции и стили
Эти примеры не обязательно нужно считать лучшими, но к ним стоит присмотреться, разрабатывая свое собственное горизонтальное меню.
[Приводу здесь только превьюшки изображений, дабы не загромождать страницу – прим. переводчика]:
Вывод
Методы, рекомендуемые в этой статье, достаточно общие, и, возможно не являются панацеей во всех случаях. Однако следование этим советам позволит посетителям вашего сайта избежать путаницы с меню, ведь пользователи обычно привыкают к определенному стилю, а его неоправданное нарушение, приведет к тонне проклятий на вашу голову.
UPD: Поставлены ссылки для каждого скрина.
Как создать горизонтальное меню с прокруткой для сайта?
В этой статье мы пошагово рассмотрим как создать горизонтальное меню с прокруткой и добавить к нему несколько улучшений, которые позволят отображать активный элемент по центру и прокручивать меню с помощью удерживания кнопки мыши.
Горизонтальное меню с прокруткой выполним на чистом CSS. JavaScript будем использовать только для добавления к нему различных улучшений.
Создание разметки
Вид горизонтального меню с прокруткой без стилей:
Написание CSS кода меню
Список используемых свойств:
На этом этапе меню будет иметь следующий вид:
2. Добавим правую границу ко всем элементам кроме последнего:
3. Выделим другим цветом фона активный пункт меню:
4. Добавим стили, которые будут изменять фон пункта меню при наведении на него курсора:
Вот так довольно просто можно создать меню с горизонтальной прокруткой.
Горизонтальная прокрутка будет появляться только тогда, когда пункты не будут помещаться в контейнер. Перемещение по меню в этом случае будет осуществляться посредством бегунка полосы прокрутки или смахиванием (свайпом влево или вправо) на сенсорных устройствах.
Улучшения для меню с горизонтальной прокруткой
1. Выравнивание активного пункта по центру
Для того чтобы при открытии страницы пункт активного меню отображался по центру можно написать небольшой код на JavaScript:
Этот скрипт после готовности DOM дерева будет автоматически прокручивать меню так, чтобы элемент с классом nav-scroller__item_active оказывался если это возможно по центру.
2. Прокручивания меню с помощью удерживания кнопки мыши
В этом улучшении уберём полосу прокрутки и подключим микро-библиотеку Dragscroll. Эта библиотека поможет нам очень просто добавить возможность прокрутки меню посредством удерживания кнопки мыши (стиль «перетащить и отпустить» или «щелкнуть и удерживать»).
Для этого в CSS добавим следующий код:
Это правило выключит отображение полосы прокрутки.
После этого на страницу подключим файл dragscroll.js :
Добавим класс dragscroll к прокручиваемому элементу: