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

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

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

 

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

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

 

demosourse

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

Разметка HTML

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

<div id="centeredmenu">
	<ul>
		<li><a href="#">Первая закладка</a></li>
		<li><a href="#" class="active">Вторая закладка</a></li>
		<li><a href="#">Третья закладка</a></li>
		<li><a href="#">Четвертая закладка</a></li>
	</ul>
</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 {
   color:#fff;
   background:#000;
   font-weight:bold;
}

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

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

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

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

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

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

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

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

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

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

Стандартное меню

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

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

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

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

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

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

Сдвигаем элементы меню

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

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

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

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

 

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Перевел: Сергей Фастунов
Урок создан: 11 Января 2011
Просмотров: 85209
Правила перепечатки


5 последних уроков рубрики "CSS"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 11 Января 2011 18:58
    wwwww
    простенько, но полезно!
    • 11 Января 2011 19:52
      budzin
      Обновите ссылку :) Файл не доступен!
      • 11 Января 2011 20:13
        wwwww
        я то здесь при чем?
        • 12 Января 2011 11:38
          unframed
          Назвался груздем -лезь в кузов.
          • 12 Января 2011 18:58
            wwwww
            ребята вы что-то тупите
  • 12 Января 2011 11:49
    Антон Бутков
    Супер!
  • 13 Января 2011 00:09
    | al_capone |
    budzin ,unframed - ололо !! XD
  • 14 Января 2011 15:58
    Gotye
    подскажите, пожалуйста, как реализовать вывод логотипа сайта слева от меню? таким образом, чтоб меню оставалось посередине, а логотип был прижат к краю окна браузера ...
  • 14 Января 2011 16:08
    Bobwelder
    Ну что такое скачал думал активное меню так выделяется вниз а нет... ваще нет слов не то что надо было
  • 17 Февраля 2011 16:32
    Ahmesh
    Как сделать чтобы class active добавлялся сам? А то у меня вторая закладка постоянно активная.
  • 19 Октября 2011 18:01
    Ваш Zi
    #centeredmenu ul { clear:left; !!!!! ЗАЧЕМ? :) float:left; list-style:none; margin:0; padding:0; position:relative; left:50%; text-align:center;
    }
    
  • 22 Января 2012 05:06
    MrYozhzh
    Спасибо огромное! Не ломая голову быстренько меню набросал. Ну еще 7 минут на подтачивание высоты, картинок, шрифта... Верстаю под Joomla и дополнил стиль для стандартного модуля меню движка:
    #centeredmenu ul li.current a {color:#fff;}
  • 7 Января 2013 18:01
    oleggu
    Сайт работает на MODx?
  • 9 Апреля 2013 19:57
    Виталий Букреев
    Такая ситуация. Необходимо меню на ширину 100% Взял с примера, с помощью padding ссылки растянул на всю ширину. При масштабировании в браузере элементы съезжают. Как быть в такой ситуации? Задавать на каждый li ширину?
  • 24 Августа 2013 22:36
    Sem3
    Просто от души СПАСИБО! Вы меня выручили :) еще раз СПАСИБО!
^ Наверх ^