Элементы меню css по центру

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

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

Пример центрированного меню

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

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

Разметка HTML

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

Код CSS центрированного меню

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

#centeredmenu < float:left; width:100%; background:#fff; border-bottom:4px solid #000; overflow:hidden; position:relative; >#centeredmenu ul < clear:left; float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center; >#centeredmenu ul li < display:block; float:left; list-style:none; margin:0; padding:0; position:relative; right:50%; >#centeredmenu ul li a < display:block; margin:0 0 0 1px; padding:3px 10px; background:#ddd; color:#000; text-decoration:none; line-height:1.3em; >#centeredmenu ul li a:hover < background:#369; color:#fff; >#centeredmenu ul li a.active, #centeredmenu ul li a.active:hover

Как работает метод центрирования

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

Элемент div без смещения

Элемент div (блочный) без смещения растягивается на всю доступную ему ширину.

Элемент div со смещением влево

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

Стандартное выровненное влево меню

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

Обратите внимание на следующие моменты:

• Элемент centeredmenu div (голубой прямоугольник) смещается влево, но имеет ширину 100%, поэтому остается растянутым на всю страницу.
• Элемент ul (розовый прямоугольник) находится внутри элемента centeredmenudiv и смещается влево. Это означает, что он будет ужат до ширины своего содержимого, то есть до суммарной ширины всех закладок.
• Все элементы li (зеленые прямоугольники) находятся внутри элемента ul и смещаются влево. Таким образом, они ужимаются до размеров ссылок в них и выстраиваются в одну горизонтальную линию.
• Внутри каждой ссылки (оранжевые прямоугольники) выводится текст закладки: Закладка 1, Закладка 2 и так далее.

Смещаем положение неупорядоченного списка

Затем мы смещаем элемент ul вправо на 50% с помощью свойства position:relative; . Когда элемент смещается с указанием процента при таких условиях важно помнить, что суммарная ширина содержащихся в нем элементов не является его шириной. В нашем случае смещение происходит на половину окна браузера (или доступного для вывода пространства).В результате наше меню начинается на середине окна и частично выходит за его пределы. И переходим к следующему шагу.

Сдвигаем положение всех элементов меню

Осталось только сдвинуть все элементы li влево на 50%. Это 50% ширины нашего элемента ul (контейнера, который содержит меню). Таким образом, закладки смещаются точно на центр окна.

Несколько важных замечаний

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

• Так как элемент ul частично выходит за рамки окна, то это приводит к выводу полос прокрутки. Поэтому нужно использовать правило overflow:hidden; для элемента centeredmenu div. Таким образом, выступающая часть элемента div будет обрезана.
• Так как элемент ul не выровнен по закладкам, то нельзя использовать никаких визуальных стилей для него. Оставьте элемент ul без фонового цвета и без рамки, чтобы он стал полностью невидимым. А стили для закладок нужно использовать только для элементов li.
• Если нужно задать особенные стили для первой и последней закладки, нужно добавить класс для первого и последнего элементов li, чтобы можно было стилизовать их индивидуально.

Заключение

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

Источник

Как выровнять горизонтальное меню по центру?

Здравствуйте уважаемые посетители моего блога! Сегодня речь пойдет о главном горизонтальном меню сайта, а именно как выровнять горизонтальное меню по центру. Да, на первый взгляд, что тут сложного — задал нужные отступы, подогнал и все. Но тут есть свои нюансы. Сайт, в первую очередь, это динамика, т.е. на сайте постоянно появляется новый контент, появляются какие то новые блоки с информацией и т.п. Так могут и появляться/исчезать некоторые пункты в главном меню. С учетом этого всего нужно добиться того, что при добавлении или удалении пункта меню, меню у нас остается все также по центру. Конечно, не всегда обязательно его центрировать, все зависит от дизайна. Но если все же у вас подразумевается ставить горизонтальное меню по центру, то применив несколько несложных трюков в css мы можем добиться нужного результата.

Горизонтальное меню по центру без выпадающих пунктов

Html-код

Css-код

*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < background: #444; position: relative; overflow: hidden; height: 40px; margin: 30px 0 >#mainmenu ul < list-style: none; margin: 0; padding: 0; position: relative; left: 50%; float: left; font: 14px Arial, Helvetica, sans-serif; height: 40px >#mainmenu ul li < position: relative; left: -50%; float: left; margin: 0 10px; height: 40px >#mainmenu ul li a < color: #fff; display: block; text-decoration: none; padding: 0 15px; line-height: 40px; >#mainmenu ul li a:hover

Разберем все по порядку, здесь все просто. Мы создаем контейнер «mainmenu», куда помещаем наше меню в виде неупорядоченного списка.

Теперь дело идет за стилями css. Сначала мы сбрасываем на ноль все поля и отступы для всех браузеров. Далее при помощи свойства «float:left» мы смещаем наш неупорядоченный список влево и далее относительным позиционированием смещаем его на 50% вправо. Ширина списка «ul» будет равна сумме длин всех пунктов «li», которые находятся внутри него. Таким образом, если мы мысленно поделим окно браузера пополам, то наше меню уйдет вправо от линии разделения. Чтобы выровнять мы применим к пунктам «li» также относительное позиционирование и сместим их влево на 50%, указав свойство «left:-50%». Да и еще, чуть не забыл, нашему контейнеру «mainmenu» нужно обязательно указать свойство «overflow:hidden», иначе мы получим горизонтальную полосу прокрутки. Вот и все, теперь наше меню выровнялось по центру. Теперь можете добавлять, хоть убавлять пункты, на позиционирование это не повлияет. Вы также можете использовать это меню на своих сайтах, просто изменив стили под ваш дизайн.

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

Теперь разберем многоуровневое меню с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не будут, потому что мы указали блоку «mainmenu» свойство — «overflow:hidden». Это говорит, что элементы за пределами данного блока показываться не будут. Но выход есть.

Html-код

CSS-код

*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; float: left; width: 100%; z-index: 10 >#mainmenu ul < clear: left; position: relative; right: 50%; height: 40px; float: right; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0 >/** Основные пункты **/ #mainmenu > ul > li < position: relative; left: 50%; float: left; height: 40px; padding: 0; margin: 0 >#mainmenu > ul > li > a < border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; >#mainmenu > ul > li:first-child > a < border: none >#mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a < color: #fff >#mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active < background: #666 >/* Выпадающие подпункты */ #mainmenu ul li ul < position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px >#mainmenu > ul > li ul li < background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; >#mainmenu ul li ul li a < border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; >#mainmenu ul li ul li.parent a < position: relative; >#mainmenu ul li ul > li.parent > a::before < border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; >#mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover < background-color: #444 >#mainmenu ul li:hover ul, #mainmenu ul li.hover ul < display: block >/* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul < opacity: 1; visibility: visible; margin: 0; >#mainmenu ul li ul li ul

Выравнивание меню по центру с помощью flexbox

Выровнять меню по центру можно также, применив новое правило в css — flexbox. Вообще трюкам с flexbox я хочу посвятить отдельный пост, оно того стоит, очень упрощает жизнь верстальщику. В общем, здесь не будем углубляться… Я приведу здесь только код css для меню с выпадающими пунктами. HTML код тот же, что и выше.

Код CSS

*, *::after, *::before < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >#mainmenu < position: relative; background: #444444; height: 40px; margin: 30px 0; padding: 0; width: 100%; z-index: 10 >#mainmenu ul < display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; height: 40px; text-align: center; font: 15px Arial, Helvetica, sans-serif; list-style: none; padding: 0; margin: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; >/** Основные пункты **/ #mainmenu > ul > li < position: relative; height: 40px; padding: 0; margin: 0 >#mainmenu > ul > li > a < border-left: 1px solid #666; display: block; color: #fff; text-decoration: none; padding: 0 20px; line-height: 40px; >#mainmenu > ul > li:first-child > a < border: none >#mainmenu > ul > li:hover > a, #mainmenu > ul > li.hover > a, #mainmenu > ul > li.active > a < color: #fff >#mainmenu > ul > li:hover, #mainmenu > ul > li.hover, #mainmenu > ul > li.active < background: #666 >/* Выпадающие подпункты */ #mainmenu ul li ul < position: absolute; left: 0; top: 40px; display: none; list-style: none; visibility: hidden; padding: 0; margin: 0; width: 200px >#mainmenu > ul > li ul li < background-color: #666; position: relative; left: 0; display: list-item; float: none; height: auto; margin: 0; text-align: left; >#mainmenu ul li ul li a < border-bottom: 1px solid #999; display: block; color: #fff; padding: 10px 15px; text-decoration: none; >#mainmenu ul li ul li.parent a < position: relative; >#mainmenu ul li ul > li.parent > a::before < border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; display: block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); height: 6px; width: 6px; >#mainmenu ul li ul li:hover, #mainmenu ul li ul li.hover < background-color: #444 >#mainmenu ul li:hover ul, #mainmenu ul li.hover ul < display: block >/* Выпадающие пункты второго уровня */ #mainmenu ul li:hover > ul < opacity: 1; visibility: visible; margin: 0; >#mainmenu ul li ul li ul

Как видим, изменились правила только для родительского списка — #mainmenu ul. Единственное, пришлось добавить префиксы для предыдущих версий браузеров. Отмечу, что правило flexbox корректно понимают только современные браузеры. Если вы ориентируетесь на более старые браузеры, то вариант с flex’ом придется отложить. Какие именно браузеры хорошо понимают flexbox можете посмотреть здесь. Вот и все. Если у вас возникли вопросы задавайте их в комментариях. Желаю удачи!

Источник