Как расположить ul меню по центру css

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

В предыдущей статье “Создаем вертикальное меню на CSS” был освещен вопрос построения вертикального меню с подменю.

display

none

block

При построении горизонтального меню нужно быть внимательным с принципом специфичности CSS, то есть — с вложенностью и каскадностью правил. Хорошим подспорьем в этом вопросе является SASS (SCSS), благодаря которому исключаются ошибки при соблюдении каскадности и наследовании свойств.

Код, написанный на SASS (SCSS) короче и логически читается проще, чем CSS. Поэтому, рекомендую изучить этот вопрос в статьях “SASS (SCSS) в картинках — Часть 1”, “SASS (SCSS) в картинках — Часть 2”.

Мы же приступим к созданию горизонтального меню с подменю “на коленках”. Почему говорю так? Дело в том, что существует масса готовых примеров и кода, а также генераторов различных меню. Но они неинтересны — нам нужно разобраться в принципе построения и возможности самому написать такую навигацию. Как обычно, начинаем с каркаса меню, выполненного на HTML:

 class="hormenu">  class="arrow" href="#">Link_1  class="sub-hormenu">  href="#">Link_1-1   href="#">Link_1-2   href="#">Link_1-3   href="#">Link_1-4     href="#">Link_2   class="arrow" href="#">Link_3  class="sub-hormenu">  href="#">Link_3-1   href="#">Link_3-2   href="#">Link_3-3     href="#">Link_4   class="arrow" href="#">Link_5  class="sub-hormenu">  href="#">Link_5-1   href="#">Link_5-2   href="#">Link_5-3   href="#">Link_5-4   href="#">Link_5-5

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

arrow

Приступим к оформлению нашего меню с помощью CSS. Сразу оговорюсь, что примеры кода, представленного здесь, написаны на SASS (SCSS). Начнем с того, что расположим навигацию горизонтально:

.hormenu margin: 50px 0 0 50px; overflow: hidden; li float: left; margin-left: 1px; &:first-child margin-left: 0; >

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

Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию и их общее впечатление от вашего сайта.

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

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

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

Пример использования html тегов для создания меню в коде ниже:

Стандартные CSS стили для горизонтального меню

ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ >a < text-decoration: none; /*убираем подчеркивание текста ссылок*/ >li < float:left; /*Размещаем список горизонтально для реализации меню*/ margin-right:5px; /*Добавляем отступ у пунктов меню*/ >

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

Пример каркаса (шаблона) вашего будущего меню

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

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left; , например, display:inline-block; или display:flex; , но рекомендуется использовать способ описанный выше.

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

Примеры красивого горизонтального меню для сайта

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

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

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

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ >a < text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#30A8E6; /*добавляем фон к пункту меню*/ color:#fff; /*меняем цвет ссылок*/ padding:10px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ border-radius:4px; /*добавляем скругление*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; >a:hover < background:#1C85BB;/*добавляем эффект при наведении*/ >li < float:left; /*Размещаем список горизонтально для реализации меню*/ margin-right:5px; /*Добавляем отступ у пунктов меню*/ >

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии

ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/ height: 50px; /*задаем высоту*/ >a < text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/ color:#fff; /*меняем цвет ссылок*/ padding:0px 15px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ line-height:50px; /*ровняем меню по вертикали*/ display: block; border-right: 1px solid #F36262; /*добавляем бордюр справа*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; >a:hover < background:#D43737;/*добавляем эффект при наведении*/ >li < float:left; /*Размещаем список горизонтально для реализации меню*/ >

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню

Стили CSS выпадающего меню

ul < list-style: none; /*убираем маркеры списка*/ margin: 0; /*убираем отступы*/ padding-left: 0; /*убираем отступы*/ margin-top:25px; /*делаем отступ сверху*/ background:#819A32; /*добавляем фон всему меню*/ height: 50px; /*задаем высоту*/ >a < text-decoration: none; /*убираем подчеркивание текста ссылок*/ background:#819A32; /*добавляем фон к пункту меню*/ color:#fff; /*меняем цвет ссылок*/ padding:0px 15px; /*добавляем отступ*/ font-family: arial; /*меняем шрифт*/ line-height:50px; /*ровняем меню по вертикали*/ display: block; border-right: 1px solid #677B27; /*добавляем бордюр справа*/ -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; >a:hover < background:#D43737;/*добавляем эффект при наведении*/ >li < float:left; /*Размещаем список горизонтально для реализации меню*/ position:relative; /*задаем позицию для позиционирования*/ >/*Стили для скрытого выпадающего меню*/ li > ul < position:absolute; top:25px; display:none; >/*Делаем скрытую часть видимой*/ li:hover > ul < display:block; width:250px; /*Задаем ширину выпадающего меню*/ >li:hover > ul > li < float:none; /*Убираем горизонтальное позиционирование*/ >

Подборка красивых горизонтальных меню на html+css

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

Поделитесь в одной из социальных сетей и скачивание сразу же будет доступно.

Благодарю за внимание.

Оценка: 4,60 из 5 (голосов: 5 )
Автор: No Zombies Allowed (Михаил)

Посты по теме

Создание сайта в блокноте
15 Май 2015

Как поменять фон сайта?
29 Дек 2014

CSS-класс ссылки и CSS-класс страницы у Joomla
27 Дек 2014

александр 16.07.2016 в 14:50
спасибо огромное! коротко, ясно и работает. все что нужно нашел.

Узнавай новости первым

Ваш e-mail в безопасности

Выравнивание списков

Минус данного способа в необходимости дополнительной разметки — список должен быть заключен в содержащий контейнер, которому присвоен класс div.center_list .

Горизонтальный список

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

Вариант 1. Сделать элементы списка строчными

/*-- CSS. Строчный вариант --*/ li { display:inline; padding:0 10px; }

Получаем список такого вида:

элемент списка 1
элемент списка 2
элемент списка 3

Вариант 2. Сделать элементы списка плавающими

/*-- CSS. Плавающий вариант --*/ ul { list-style: none; /* убираем маркеры, если нужно */ } li { float: left; /* для выравнивания по правому краю - right */ padding: 0 10px; }

Получаем такой же список:

элемент списка 1
элемент списка 2
элемент списка 3

На практике, в частности при создании меню на основе списка, чаще используется второй вариант.

Плавающий список

Заголовок не совсем точен; речь идет о списке, обтекающем плавающий элемент.

И опять возвращаемся к плавающим элементам. Два понятия — «плавающий элемент» и «обтекание». Необходимо четко представлять что это такое, что где плавает и что обтекает:

Плавает элемент, у которого свойству float присвоено
значение left или right .

И плавает у соответствующей кромки содержащего блока или прижимается соответствующей кромкой к другому плавающему элементу.

Следующие за ним, обычные блоки никого не обтекают! Они «тупо» не видят плавающий блок.

Подлость происходящего в том и состоит, что обтекает только текст (строчные элементы и элементы с установленным свойством display: inline или display: inline-block !

Когда-то изначально свойство float именно для этого и было придумано!

Все неприятности — от маркеров, которые не являются строчными элементами, и часто происходит следующее:

плавающий блок

пункт 1
пункт 2

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

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

Вот как это может выглядеть:

плавающий блок
margin-right: 25px

Параграф до списка

Параграф после списка

Согласитесь, не очень красиво.

Решение

/*-- CSS --*/ /*-- Cтиль, установленный по умолчанию --*/ ul { margin: 0 0 10px 25px; } /*-- Переопределяем стили --*/ ul { margin: 0 0 10px 10px; padding-left: 15px; overflow: hidden; }

В результате получаем:

плавающий блок

Параграф до списка

Параграф после списка

Особенности применения

Чтобы оставить отступ обычных, не обтекающих списков неизменным, мы уменьшили margin и увеличили padding на одинаковую величину. Отступ маркера от начала текста равен размеру шрифта (14px), и padding должен быть больше этой величины, иначе маркер обрежет.

Мы определили свойства для тега ul . Т.е. для всех списков на сайте. Это не очень хорошо, так-как overfow: hidden , в некоторых случаях, может оказаться не безобидным. Поэтому нужно выбрать один из способов использования данного метода:

1. Если обтекающий список — редкое исключение:

Добавляем конкретным тегам ul класс, например ul.folat_list , и прописываем свойства уже для класса.

2. Обратная ситуация, когда свойство необходимо присвоить только спискам без класса:

Используем следующую конструкцию (только для соврменных браузеров, поддерживающих CSS3)

/*-- CSS --*/ /*-- Для "деклассированных" списков --*/ ul:not([class]) { margin: 0 0 10px 10px; padding-left: 15px; overflow: hidden; }

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

Меню на всю ширину блока с равным отступом

Очень часто возникает задача сделать меню на сайте на всю ширину div’а. Самое простое решение — это сделать фиксированную ширину для каждого пункта, но если в дальнейшем нужно будет добавить еще пункты или текст ссылки будет больше, чем заданная ширина?

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

И добавляем стили, в которых блок ul будет являться таблицей, а каждый элемент li и a ячейкой данной таблицы.

ul.full-width < width: 100%; /* Ширина основного блока меню */ height: 50px; /* Высота основного блока меню */ position: relative; display: table; margin: 0; padding: 0; >ul.full-width li < display: table-cell; position: relative; >ul.full-width li a < display: block; position: relative; width: 100%; height: 100%; text-align:center; background: #FFF; line-height: 50px; /* Приравниваем к высоте, чтобы выровнять текст по вертикали */ >ul.full-width li ul < display: none; /* Скрываем выпадающее меню */ position: absolute; width: 100%; margin: 0px; padding: 0px; >ul.full-width li ul li < display: block; >ul.full-width li:hover ul < display: block; /* Показываем выпадающее меню, где оно есть, при наведении */ >

Нам будет приятно

Еще интересное в блоге

Как отменить обтекание текстом

Popover со скруглёнными углами

Загрузка комментариев.

Будем рады работать именно с вами

Политика конфиденциальности персональных данных

Общие положения.
1. Настоящая Политика конфиденциальности персональных данных (далее — Политика) действует в отношении всех персональных данных, которую компания Keengo (далее – Компания), может получить от пользователя (лица, заполнившего форму обратной связи, использующего другие сервисы официального сайта keengo.ru (далее – Сайт)), в частности в ходе: отправки отзывов или вопросов, заказа услуг, участия в рекламных и/или маркетинговых кампаниях или акциях и/или ином взаимодействии (далее – Услуги).
2. Заполняя форму обратной связи и нажимая кнопку «Согласен/на», расположенную на странице Сайта, на которой размещена форма обратной связи, а равно указывая свои персональные данные при использовании других сервисов Сайта, пользователь выражает согласие с настоящей Политикой и указанными в ней условиями обработки и передачи его персональных данных. Согласие Пользователя на предоставление, обработку и передачу его Персональных данных Компании в соответствии с Политикой является полным и безусловным.
3. Посетителям Сайта следует воздержаться от заполнения формы и/или от использования других сервисов Сайта в случае несогласия (полного или частичного) с Политикой, а равно несогласия предоставить персональные данные.
4. Согласие, даваемое пользователем, включает в себя согласие на сбор, систематизацию, накопление, хранение, уточнение (обновление, изменение), использование, занесение в базы данных (в том числе электронные) Компании, передачу внутри Компании другим отделам и подразделениям или поставщику услуг, обязующегося выполнять условия договора о защите персональных данных, в целях рассылки информационных материалов и/или в рекламных целях (в том числе рассылку приглашений на мероприятия, проводимые/организованные Компанией), трансграничную передачу, блокирование, обезличивание, уничтожение персональных данных.
5. Согласие, даваемое пользователем, распространяется на следующие персональные данные: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон.
6. Срок действия согласия пользователя является неограниченным, однако, пользователь вправе в любой момент отозвать настоящее согласие путём направления письменного уведомления на адрес электронной почты: info@keengo.ru, с пометкой «отзыв согласия на обработку персональных данных».
1. В рамках настоящей Политики под персональными данными пользователя понимаются персональные данные, которые пользователь предоставляет о себе самостоятельно при заполнении формы обратной связи на Сайте, при использовании других сервисов Сайта, при регистрации (создании учётной записи) на Сайте или в процессе использования услуг, предоставляемых Компанией. Соответствующая информация явно обозначена, к ней, в частности отнесены: фамилия, имя, отчество, адрес электронной почты, должность, наименование организации, в которой работает пользователь, контактный телефон. Иная информация предоставляется пользователем на его усмотрение.
2. Компания исходит из того, что пользователь представляет достоверные персональные данные, а также, что пользователь имеет право предоставить персональные данные.
1. Компания использует средство 1С Битрикс для сбора сведений об использовании Сайта, таких как частота посещения Сайта пользователями, посещенные страницы и сайта, на которых были пользователи до перехода на данный Сайт. 1С Битрикс собирает только IP-адреса, назначенные пользователю в день посещения данного Сайта, но не имя или другие идентификационные сведения.
2. 1С Битрикс размещает постоянный cookie-файл в веб-браузере пользователя для идентификации в качестве уникального пользователя при следующем посещении данного Сайта. Этот cookie-файл не может использоваться никем, кроме 1С Битрикс. Сведения, собранные с помощью cookie-файла, будут храниться на серверах, находящихся в Российской Федерации.
3. Компания использует сведения, полученные через 1С Битрикс, только для обработки и хранения персональных данных.
1. Компания обрабатывает только те персональные данные, которые необходимы для оказания услуг.
2. Персональную информацию пользователя Компании может использовать в следующих целях:
  1. Идентификация стороны в рамках оказания услуги.
  2. Рассылка рекламных и/или маркетинговых материалов Компании, рассылка приглашений на мероприятия, конференции, выставки, проводимые и/или организуемые Компанией, проведение телемаркетинговых компаний.
  3. Проведение статистических и иных исследований, на основе обезличенных данных.
  1. В отношении персональных данных пользователя сохраняется ее конфиденциальность, кроме случаев обработки персональных данных, доступ неограниченного круга лиц к которым предоставлен пользователем либо по его просьбе.
  2. Компания вправе передать персональную информацию пользователя третьим лицам в следующих случаях:
    1. Пользователь предоставил свое согласие на такие действия.
    2. Передача персональных данных организациям, которые оказывают услуги Компании по рассылке рекламных и/или маркетинговых материалов, организации и проведению мероприятий, конференций, выставок, телемаркетингу, обзвону потенциальных клиентов Компании.
    3. Передача необходима для достижения целей, осуществления и выполнения функций, полномочий и обязанностей, возложенных законодательством Российской Федерации на Компанию.
    1. Компания принимает необходимые и достаточные организационные и технические меры для защиты персональных данных пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий с персональными данными третьих лиц.
    1. Компания предпринимает разумные меры для поддержания точности и актуальности, имеющихся у Компании персональных данных, а также удаления устаревших и других недостоверных или излишних персональных данных, тем не менее, Пользователь несет ответственность за предоставление достоверных сведений, а также за обновление предоставленных данных в случае каких-либо изменений.
    2. Пользователь может в любой момент изменить (обновить, дополнить, блокировать, уничтожить) предоставленную им персональную информацию или её часть, а также параметры её конфиденциальности путем обращения в Компанию.
    3. Пользователь вправе в любой момент отозвать согласие на обработку Компанией персональных данных путём направления письменного уведомления на электронный адрес: info@keengo.ru с пометкой «отзыв согласия на обработку персональных данных», при этом отзыв пользователем согласия на обработку персональных данных влечёт за собой удаление учётной записи пользователя с Сайта и баз данных Компании, а также уничтожение записей, содержащих персональные данные, в системах обработки персональных данных Компании.
    4. Пользователь имеет право на получение информации, касающейся обработки его персональных данных Компанией.
    1. Блог
    2. Блог о CSS
    3. Меню на всю ширину блока с равным отступом
    Keengo · Web Design & Development
    © 2010–2023 Все права защищены
    Похожие публикации: