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

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

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

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

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

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

Пост был обновлен: Окт 22, 2016

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

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

Читайте также:  Вертикально-выпадающее меню аккордеон для Joomla 2.5.x - 3.x.x

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
}

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

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

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

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

Код 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 можете посмотреть здесь.

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

Пост был обновлен: Окт 22, 2016

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

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

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

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

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

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

Система Orphus

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

  • Наталья Ноя 28, 2016 в 0:11

    Большое спасибо за урок! Только у меня в результате получается такая штука:

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

    Иначе говоря, если у меня окно браузера уменьшено, я вижу только 2,3 или 4 пункта горизонтального меню из моих 5. И никакого намека на то, что есть еще что-то, я не наблюдаю.

    ВОПРОС: можно ли «уговорить» это меню показываться в две строки в случае, если размер окна браузера меньше длины меню. И как это сделать.

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

    • Заур Магомедов
      Заур Магомедов Ноя 28, 2016 в 2:03

      Данное меню из примера оно не адаптивное. Вам нужно его адаптировать. К сожалению в двух словах не опишешь. Нужно его переделать и сделать адаптивным под разные разрешения экранов.

      • Наталья Ноя 28, 2016 в 20:27

        Благодарю Вас за ответ. А есть ли уроки на эту тему?
        Очень желательно все сделать на html/css.

        До javascript я не доросла еще. Увы.

      • Наталья Ноя 28, 2016 в 20:57

        В принципе, я нашла, как это сделать. И даже заработал у меня первый код, который я попробовала вставить в html- и css-файлы.

        Только Ваш вариант мне нравится гораздо больше. Хотелось бы его доработать. Поэтому буду НУ ОЧЕНЬ признательна за ссылку на урок.

        • Заур Магомедов
          Заур Магомедов Ноя 29, 2016 в 11:32

          Конкретную ссылку на урок, где вам покажут как мое меню сделать адаптивным я дать вам не могу. Учите HTML, CSS, адаптивную верстку. В интернете на эту тему масса материалов.

          • Наталья Ноя 29, 2016 в 17:33

            Учу, и буду учить дальше. Это несомненно. Я думала, что его несложно адаптировать.

            Ну, нет так нет. В любом случае спасибо за урок.

            • Заур Магомедов
              Заур Магомедов Ноя 29, 2016 в 18:39

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

  • Сергей Сен 28, 2016 в 0:02

    Добрый день, Заур! не могли бы Вы мне подсказать как сделать, чтобы при перемещении курсора с основного меню на выпадающее меню, цвет текста не менялся?! То есть, я сделал, что когда наводите курсор на пункт — у текста меняется цвет и выпадает меню, но когда я перевожу курсор на выпадающее меню, цвет текста в родительском пункте меняется на первоначальный… Мне надо, чтобы не менялся! Надеюсь Вы меня поняли! Спасибо!

    • Заур Магомедов
      Заур Магомедов Сен 28, 2016 в 0:29

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

      • Сергей Сен 28, 2016 в 1:07

        К сожалению, не получается отправить код html и css почему-то(( По аналогии с фоном, не получается. Фон остается подсвеченным при переходе на выпадающее меню, а текст нет!

        • Заур Магомедов
          Заур Магомедов Сен 28, 2016 в 2:50

          Чтобы при наведении на подпункт оставался выделенным родительский пункт с ссылкой, то нужно сделать примерно следующее:

          
          ul.menu > li:hover > a {
          color: red;
          }
          

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

          • Сергей Сен 28, 2016 в 23:19

            Спасибо большое, Заур! Вы очень хороший специалист!

  • Сергей Июл 24, 2016 в 19:30

    Здравствуйте!
    Во втором варианте меню без «overflow: hidden;» появляется полоса прокрутки…

    • Заур Магомедов
      Заур Магомедов Июл 26, 2016 в 13:00

      На демо-примере у вас есть полоса прокрутки?

  • Vladimir Июн 13, 2016 в 13:43

    Спасибо

  • avex мая 22, 2016 в 0:53

    Доброй ночи!
    Заур, у меня сайт на joomla 3.5 bootstrap 3x — там, видимо, другой код меню. Подскажите, пожалуйста, как выровнять бутстраповское меню, встроенное в джумлу. Какие отличия в нем от того, что Вы описали в статье?

    • Заур Магомедов
      Заур Магомедов мая 22, 2016 в 1:04

      Доброй ночи! Ну так я сказать не могу, я же не знаю что у вас там за шаблон и меню. Можете в своем шаблоне найти код меню и закомментировать его или вырезать и вставить код css меню из статьи. Но вам придется под ваш стиль его править. Здесь нужны знания CSS и HTML.

  • Вячеслав мая 13, 2016 в 18:25

    Классное меню с первого варианта, второй вариант не пробовал… первый себе поставил!!))) Спасибо!

  • Илья Мар 18, 2016 в 15:09

    Добрый день, осваиваю html и css. использовал joomla 3 стандартный шаблон и теперь хочу его доработать…Ни как не могу понять как расположить горизонтальное выпадающее меню по центру страницы..сайт: http://www.energostroynn.ru

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

      Ваш сайт не открывается.

  • Иван Ноя 21, 2014 в 2:27

    Я так же долго искал решение этого вопроса. методом научного тыка все-таки решил
    версия WP 4.01 тема twentytwelve 1,0 в style.css находим и меняем выделенное

    
        .main-navigation ul.nav-menu,
        .main-navigation div.nav-menu > ul {
            border-bottom: 1px solid #ededed;
            border-top: 1px solid #ededed;
            display: inline-block !important;
            text-align: center;
            width: 100%;
        }
    
    • Max Фев 28, 2016 в 20:01

      Спасибо, Иван! Сработало.

  • Вадим Ноя 15, 2014 в 17:40

    Здравствуйте! Поменял стили для меню, как тут описано. все сработало. Меню оказалось в центре, но информация страниц съехала влево. Таблицы не стоят по центру. Все сместилось влево.
    Подскажите что делать? сайт http://www.profispeak.com/

    • Заур Магомедов
      Заур Магомедов Ноя 15, 2014 в 17:47

      У меня все нормально… Что именно не так?

  • tat34 Фев 10, 2014 в 12:27

    Заур, спасибо за отличную статью.

    У меня, правда, меню 2-ого уровня не показывается, вернее показывается чуть-чуть, но за блоком, идущим ниже.
    z-index:100 стоит.
    Не подскажите в чем может быть проблема?

    • Заур Магомедов
      Заур Магомедов Фев 10, 2014 в 17:59

      Здравствуйте! Дайте ссылку посмотреть, так не могу ничего сказать что у вас там…

      • tat34 Фев 10, 2014 в 18:55

        Отправил через Форму обратной связи

        • tat34 Фев 10, 2014 в 19:52

          Спасибо, ваше указание помогло!
          Честно говоря, не совсем понял почему значение position у блока, находящего ниже, влияет на отображение моего меню.
          Ну да ладно, разберусь наверное

          • Заур Магомедов
            Заур Магомедов Фев 10, 2014 в 20:09

            Просто когда указываете правило z-index нужно обязательно указать position, а у вас его не было и поэтому правило z-index не работало. Удачи!…

  • Zheka Дек 22, 2013 в 9:37

    А скажите пожалуйста, как сделать чтобы страницы меню были слева и справа? Смотрите, я хочу чтобы слева были страницы например: «Обо мне», «О сайте», «Карта сайта». А справа в этом же горизонтальном меню были, например, страницы: «Информация», «Форум». Это вообще возможно сделать?

    • Заур Магомедов
      Заур Магомедов Дек 22, 2013 в 11:35

      Возможно. Но в данном случае вам нужно указать каждому пункту списка li уникальный класс и далее в css пунктам, которые должны быть справа указать правило вместо float:left — float:right.

      • Zheka Дек 22, 2013 в 17:17

        Спасибо! Но у меня в html коде не как у вас, у меня там:

        Т.е. не для каждого пункта меню отдельная строчка. Вот я и ломаю голову.

        • Zheka Дек 22, 2013 в 17:26

          …у меня там:

          • Zheka Дек 22, 2013 в 17:38

            странно, html код не вставляется. У меня там div class=»l» и div class=»r» и всё

  • Олег Окт 20, 2013 в 12:01

    https://www.youtube.com/watch?feature=player_embedded&v=_QRiL5fBBU8

    Онлайн сервис поможет сделать классное меню для вашего сайта.

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

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

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

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

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