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

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

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

Заур Магомедов
Главная » Приемы верстки html-css » Как выровнять горизонтальное меню по центру?

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

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

Пост был обновлен: Фев 15, 2017

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

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

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

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

Читайте также:  Горизонтальное многоуровневое меню на css с эффектом анимации

Итак, я изменил предыдущий код и удалил из него свойство «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
}

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

Читайте также:  Как прижать footer (подвал сайта) к низу окна браузера

Выравнивание меню по центру с помощью 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 можете посмотреть здесь.

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

Пост был обновлен: Фев 15, 2017

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

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

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

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

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

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

Система Orphus

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

  • Владислав Июл 11, 2017 в 18:09

    Как сделать такую разделяющую полоску между пунктами основного уровня?

    • Заур Магомедов
      Заур Магомедов Июл 11, 2017 в 20:20

      Не понял вопрос — какую такую?

  • Александр Мар 02, 2017 в 14:30

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

    • Заур Магомедов
      Заур Магомедов Мар 02, 2017 в 23:34

      Здравствуйте! Нужно либо создать еще одно меню и распределить пункты, либо править код меню, чтобы невмещающиеся пункты прятались в подпункт «Еще». Можно и на javascript это сделать, но это не желательно. Лучше все же на php.

      • Константин Качан Сен 14, 2017 в 19:23

        Заур спасибо вам за такие чудесные примеры, они очень помогают, вот я тоже столкнулся с проблемой что при масштабировании список меню стает в два ряда, пока что PHP и JS я не знаю, можете подсказать как с этим бороться? и как исправить эту проблему!

        • Заур Магомедов
          Заур Магомедов Сен 15, 2017 в 13:40

          Ну, php знать тут не обязатально и js тоже самую малость. Здесь нужны знания css. К сожалению в двух словах не объяснишь, это делать надо руками.

  • Павел Мар 01, 2017 в 20:08

    Здравствуйте. Нашел очень хорошее,фиксированое меню. Но оно не центровано,пробовал сам css переделать,толку ноль,не реагирует ни на какие правки. Меню скачано с англо сайта и присутствуют 2 стиля, при чем оба свалены в кучу, без разметки. Может посмотрите как в нем центровку сделать.
    mod-style

    === Css код удален ===

    • Заур Магомедов
      Заур Магомедов Мар 01, 2017 в 20:37

      Зачем вы сюда весь этот код скидываете? Вы думаете я в этом ковыряться буду? Хотите отцентировать заплатите денежку верстальщику и он сделает вам меню какое вашей душе угодно.

      • Павел Мар 01, 2017 в 20:39

        Да я вообще то и хотел финансово отблагодарить если поможете. Просто дописать забыл. Ну нет так нет.

        • Константин Качан Сен 14, 2017 в 19:24

          А врать не хорошо!))

  • Владимир Фев 23, 2017 в 21:55

    Здравствуйте! Подскажите пожалуйста. У меня возникла не большая проблема. В моем меню, при наведении на кнопку курсора, меняется цвет кнопки, кроме последней ячейки.
    Эта ячейка типа вообще ни как не реагирует на наведение курсора. Когда меняю цвет меню, она изменяется, а при наведении курсора должна, показать другие оттенки, но не меняется.

    • Заур Магомедов
      Заур Магомедов Фев 25, 2017 в 1:36

      Зачем вы весь код скидываете сюда? В этом коде нужно ковыряться и вникать что у вас там не так. Извините, сейчас заниматься этим нет времени.

  • Владислав Янв 07, 2017 в 17:48

    Здравствуйте. Такая проблема, подскажите, делаю по вашей статье верхнее меню для сайта. Делаю на компьютере где файл индекс имеет расширение html, все работает, корректно отображается, переношу этот код на сайт, на сайте файл индекс не html, а php и не работает. css почему то не подключается, в чем может быть причина?

    • Заур Магомедов
      Заур Магомедов Янв 07, 2017 в 17:56

      Сайт у вас работает на cms, правильно ведь? Если да, то зачем вам файл index.html. Скопируйте css код в ваш файл стилей на сайте и сопоставьте классы или ID. Т.е. у вас на сайте родительский блок меню с ID не mainmenu, а скажем, — mainnav. Тогда вам надо поменять данный индефикатор в стилях css, либо же поменять индефикатор в html коде на mainmenu. Надеюсь вы меня поняли.

      • Владислав Янв 07, 2017 в 18:52

        Нет, не на cms.

        • Заур Магомедов
          Заур Магомедов Янв 07, 2017 в 18:54

          А почему тогда с расширением php? В любом случае проблем быть не должно. Что-то не так делаете…

      • Владислав Янв 07, 2017 в 19:01

        У меня стоит меню, див топ-меню, к нему подключены стили цсс. Я пробуя, чтоб не испортить под блок топ-меню вставил второе меню по принципу из статьи и к этому маинменю так же добавил стили цсс, но эти стили не подключились. На странице просто вертикально под существующим меню отобразился блок маинменю, но безформенный, и при нажатии просмотреть код элемента видно, что цсс к данному блоку отсутствую.

        Может это потому что файл php, а html.

        • Заур Магомедов
          Заур Магомедов Янв 07, 2017 в 20:20

          Добавьте стили меню в ваш файл стилей или подключите файл стилей меню в вашем файле index.php. Не важно какое у вас расширение файла php или html. Все будет работать.

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

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

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

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

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