< Заур Магомедов />

профессиональный верстальщик и блоггер

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

Заур Магомедов
Главная » Верстка Html5, Css3 » Как выровнять горизонтальное меню по центру?

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

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

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

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

Сначала разберем на примере горизонтального меню, которое не имеет выпадающих пунктов.

Html-код

<div id="mainmenu">
    <ul>
        <li><a href="#">Пункт 1</a></li>
        <li><a href="#">Пункт 2</a></li>
        <li><a href="#">Пункт 3</a></li>
        <li><a href="#">Пункт 4</a></li>
        <li><a href="#">Пункт 5</a></li>
    </ul>
</div>

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 {
    background-color: #666;
}

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

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

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

Читайте также:  CSS анимация на сайте посредством библиотеки Animate.css

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

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

Итак, я изменил предыдущий код и удалил из него свойство «overflow:hidden».

Html-код

<div id="mainmenu">
<ul>
<!-- Пункт меню 1 -->
<li><a href="#">Пункт 1</a>
<ul>
<li class="parent"><a href="#">подпункт 1.1</a>
<ul>
<li><a href="#">подпункт 1.1.1</a></li>
<li><a href="#">подпункт 1.1.2</a></li>
<li><a href="#">подпункт 1.1.3</a></li>
</ul>
</li>
<li class="parent"><a href="#">подпункт 1.2</a>
<ul>
<li><a href="#">подпункт 1.2.1</a></li>
<li><a href="#">подпункт 1.2.2</a></li>
<li><a href="#">подпункт 1.2.3</a></li>
</ul>
</li>
<li><a href="#">подпункт 1.3</a></li>
<li><a href="#">подпункт 1.4</a></li>
<li><a href="#">подпункт 1.5</a></li>
</ul>
</li>
<!-- Пункт меню 2 -->
<li class="active"><a href="#" class="active">Пункт 2</a>
<ul>
<li><a href="#">подпункт 2.1</a></li>
<li><a href="#">подпункт 2.2</a></li>
<li class="parent"><a href="#">подпункт 2.3</a>
<ul>
<li><a href="#">подпункт 2.3.1</a></li>
<li><a href="#">подпункт 2.3.2</a></li>
<li><a href="#">подпункт 2.3.3</a></li>
</ul>
</li>
<li><a href="#">подпункт 2.4</a></li>
<li><a href="#">Длинный подпункт, длинный подпункт</a></li>
</ul>
</li>
<!-- Пункт меню 3 -->
<li><a href="#">Длинный пункт меню 3</a>
<ul>
<li><a href="#">подпункт 3.1</a></li>
<li><a href="#">подпункт 3.2</a></li>
<li><a href="#">подпункт 3.3</a></li>
<li><a href="#">подпункт 3.4</a></li>
<li><a href="#">подпункт 3.5</a></li>
</ul>
</li>
<!-- Пункт меню 4 -->
<li><a href="#">Пункт 4</a>
<ul class="last">
<li><a href="#">подпункт 4.1</a></li>
<li><a href="#">подпункт 4.2</a></li>
<li><a href="#">подпункт 4.3</a></li>
<li><a href="#">подпункт 4.4</a></li>
<li><a href="#">подпункт 4.5</a></li>
</ul>
</li>
<!-- Пункт меню 5 -->
<li><a href="#">Пункт 5</a>
<ul class="last">
<li><a href="#">подпункт 5.1</a></li>
<li><a href="#">подпункт 5.2</a></li>
<li><a href="#">подпункт 5.3</a></li>
<li><a href="#">подпункт 5.4</a></li>
<li><a href="#">подпункт 5.5</a></li>
</ul>
</li>
</ul>
<!-- Конец списка -->
</div>
<!-- Конец блока #mainmenu -->

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 {
top: 0;
left: 200px;
margin: 0 0 0 20px;
width: 180px
}

Теперь у нас меню выставлено по центру и при наведении выпадают подпункты.

Читайте также:  Основы семантической верстки на HTML5

Выравнивание меню по центру с помощью 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 {
 top: 0;
 left: 200px;
 margin: 0 0 0 20px;
 width: 180px
}

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

Вот и все. Если у вас возникли вопросы задавайте их в комментариях. Желаю удачи!

Заур Магомедов
Заур Магомедов

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

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (33 оценок, среднее: 3,67 из 5)
Загрузка...

Проверка орфографии

Система Orphus

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

  • Игорь Мар 19, 2013 в 1:53

    А как доделать теперь из этого выпадающего меню — мегаменю, т.е. чтобы следующие подпункты выпадали вбок?

    • Заур Магомедов
      Заур Магомедов Мар 19, 2013 в 14:09

      Я вот думаю может для мега-меню создать отдельную статейку? Да, наверно так и сделаю…

      • Игорь Мар 19, 2013 в 16:29

        Да, наверное так будет лучше. Но, если можно, наверное многие со мной согласятся, сделайте основу с этой статьи.

        • Заур Магомедов
          Заур Магомедов Мар 19, 2013 в 17:34

          Хорошо, как раз уже над этим работаю.

          • Игорь Мар 20, 2013 в 16:09

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

            • Заур Магомедов
              Заур Магомедов Мар 20, 2013 в 22:41

              Меню сделал, только вот в ИЕ не хочет работать. Сижу тут мучаюсь с ним…

  • Игорь Мар 05, 2013 в 10:59

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

  • Игорь Мар 05, 2013 в 9:38

    Заур, Ваше меню работает также в двухстрочном меню, но если можно посмотрите, пожалуйста, на меню «картриджи и комплектующие» выпадающее меню,
    ( http://2.filter-tver.com/ )
    там почему-то свойство «border» отображается неправильно. Пробовал в firefox и google.
    http://ifotki.info/13/ab27c027116a7ed5d4ce7a5d54775dc56dac60145121599.png.html

    • Заур Магомедов
      Заур Магомедов Мар 06, 2013 в 23:06

      Сделаю со временем и многоуровневое меню. Посмотрю, как свободная минутка найдется…

  • Игорь Мар 04, 2013 в 17:54

    Подскажите, пожалуйста.
    У меня Горизонтальное меню 2-х строчное («.mainmenu») и в нем нужно чтобы начало выпадающегося списка было ниже, т.е. под элементом «ul». (сейчас же (если текст «ul» в 2 строки, то список начинает выпадать после первой строки). Что нужно подправить?

    • Заур Магомедов
      Заур Магомедов Мар 04, 2013 в 20:38

      Стилю «#mainmenu ul li ul» задаете свойство — «top:30px» и оно должно равняться высоте основного блока — ul. Т.е., если у вас высота основного меню 50px, то подменю при выпадении будет смещена на 50px вниз — top:50px, смещается оно абсолютным позиционированием.

  • Игорь Фев 28, 2013 в 17:44

    Спасибо Заур, помогло!
    Мы с Вами еще не прощаемся, просматриваю Ваш курс “Верстка шаблона для Joomla 2.5″.:) Пока все понятно.

    • Заур Магомедов
      Заур Магомедов Фев 28, 2013 в 22:38

      Рад, что помог. Будут вопросы, пишите…

  • Игорь Фев 28, 2013 в 12:42

    Появилась горизонтальная полоса прокрутки внизу сайта. Сама область body width:960px, а внизу полоса прокрутки, расширяющая ширину.:) ❓

    • Заур Магомедов
      Заур Магомедов Фев 28, 2013 в 17:37

      Понял, у меня разрешение экрана высокое, поэтому никакой полосы нет. Чуток уменьшил, появилась. Но тут проблема однозначно не в меню. Если в подвальном меню не предусматриваются выпадающие подпункты, то достаточно добавить свойство — overflow:hidden для #footer_menu и полоса пропадет.

  • Игорь Фев 28, 2013 в 1:52

    Да, именно еще не устранил.
    Точно, на Вашем демо все нормально. Буду думать..

    • Заур Магомедов
      Заур Магомедов Фев 28, 2013 в 11:19

      Так я на вашем меню не вижу проблем. Не пониманию что вы хотите устранить?

  • Игорь Фев 27, 2013 в 23:39

    У меня на сайте (недоделанном) внизу появилась полоса прокрутки, как только я убираю (firebug) «left: 50%» полоса исчезает, ну,и, соответственно смысл идеи меню пропадает.
    #footer_menu ul {
    float: left;
    font: 14pxArial,Helvetica,sans-serif;
    height: 30px;
    left: 50%;
    list-style: none outside none;
    margin: 0 0 30px;
    padding: 0;
    position: relative; width: 960px;
    }
    Не подскажете, что можно сделать?

    • Заур Магомедов
      Заур Магомедов Фев 28, 2013 в 0:25

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

  • Игорь Фев 12, 2013 в 22:48

    Спасибо Заур, все работает. 👿

    • Заур Магомедов
      Заур Магомедов Фев 12, 2013 в 23:02

      Не за что! Рад помочь… 🙂

  • Олег Дек 31, 2012 в 12:20

    Заур, а Вы не планируете книжку написать?
    По созданию сайтов или шаблонов для WP?

    Я бы купил…

    • Заур Магомедов
      Заур Магомедов Дек 31, 2012 в 13:21

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

  • Заур Магомедов
    Заур Магомедов Дек 13, 2012 в 11:36

    Проверял в последних версиях Firefox, Opera, Chrome, Safari, IE 7,8,9. Все хорошо. В других не проверял.

  • Имран Ильясов
    Имран Дек 13, 2012 в 10:15

    Помню сколько мучались, не могли решить эту задачу сделать меню по центру 🙂 интересно, кроссбраузерность в каких браузерах и версиях работает? Подзабыл что то 🙂

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]