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

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

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

Заур Магомедов
Главная » Верстка 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», иначе мы получим горизонтальную полосу прокрутки.

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

Читайте также:  Фреймворк Twitter Bootstrap - что это такое?

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

Теперь разберем многоуровневое меню с выпадающими подпунктами. Здесь ситуация несколько иначе и несколько сложнее, т.к. в первом случае у нас подпункты выпадать не  будут, потому что мы указали блоку «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
}

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

Читайте также:  Как прижать 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 можете посмотреть здесь.

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

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

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

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

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

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

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

Система Orphus

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

  • Андрей Сен 03, 2013 в 17:40

    Спасибо, промеры помогли, решил свою проблему)

  • Игорь Июл 18, 2013 в 14:47

    Подскажите как выровнять меню по центру
    вот css:

    
    #menu{margin:0px;padding:0px;width:1000px;background:#b10202 url('/images/menu.png');height:33px;font-size:16px;text-transform:uppercase;}
    #menu ul {list-style:none;margin:0px auto;padding:0px 5px;width:910px;height:33px;overflow:hidden;} 
    #menu li {float:left;list-style:none;margin:0px;padding:0px;} 
    #menu li a,#menu li a:link,#menu li a:visited {color:#eee;display:block;margin:0px;padding:10px 10px 10px 10px;}
    #menu li a:hover,#menu li a:active,#menu li a.uMenuItemA {background:#db0505 url('/images/menua.png') repeat-x;color:#fff;margin:0px;padding:10px 10px 10px 10px;text-decoration:none;}
    
    • Заур Магомедов
      Заур Магомедов Июл 18, 2013 в 16:01

      А код в выше приведенной статье чем вам не нравится? Скопируйте css-стили, которые я выложил, поменяйте классы и id на свои и все. Выложены стили css как для простого горизонтального, так и для выпадающих пунктов. Если где надо подкорректировать правьте код…

  • Greg Май 16, 2013 в 21:03

    Заур, хочу заранее поблагодарить Вас за пост на мой взгляд самый удачный для понимания))
    Предлагаю небольшое дополнение.
    В общем чтобы пункты меню не скатывались вниз при уменьшении размеров браузера, предлагаю задать минимально допустимый размер длины меню, ну например min-width:900px

    Ниже стиль о котором идет речь:

    
    #mainmenu{
    position:relative;
    background:#444444;
    height:30px;
    margin:20px 0;
    padding:0;
    float:left;
    width:100%;
    min-width:900px;
    z-index:100 /* для отображения подпунктов поверх остальных блоков */
    }
    
    • Заур Магомедов
      Заур Магомедов Май 16, 2013 в 23:49

      Спасибо, что пост понравился. По поводу данного исправления это вы верно заметили. Добавлю, что данное свойство применительно к резиновому дизайну, если сайт фиксированный (если блок с меню лежит внутри фиксированного блока), то не обязательно.

  • Анна Май 04, 2013 в 19:31

    Добрый день!
    Бьюсь уже который день над этим вопросом… Прикладываю изображение, чтобы лучше объяснить. Сейчас моя менюшка выглядит как на первом изображении и идет по левому краю. А хотелось бы равномерного заполнения ячеек менюшки по заданной длине как на второй картинке. http://www.assassins-creed.ru/themes/as/images/headermenu.jpg Подскажите, пожалуйста:

    .nav{
      position:relative; 
    }
    .nav ul, .nav li{
      list-style-type:none;
      padding:0;
      margin:0;
    }
    .nav li{
      position:relative;
      float:left;
      line-height: normal;
    }
    .nav a{
      display:block;
      position:relative;
      text-decoration: none;
    }
    .nav a:hover{
      text-decoration: none;
    }
    .nav ul ul{
      position:absolute;
      z-index:15;
      display:none;
      width:300px;
      top:29px;
      -moz-box-shadow:0px 8px 15px rgba(0,0,0,0.25);
      -webkit-box-shadow:0px 8px 15px rgba(0,0,0,0.25);
      box-shadow:0px 8px 15px rgba(0,0,0,0.25);
    }
    /* level 3+ */
    .nav ul ul ul{
      top:10px;
      left:280px;
    }
    .nav li li{float: none;}
    .nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul{display:none;}
    .nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul{display:block;}
    
    • Заур Магомедов
      Заур Магомедов Май 04, 2013 в 22:04

      Чтобы было как на рисунке 2 я бы сделал так — скопировал бы весь css-код с вышеприведенной статьи для выпадающих пунктов, далее придал бы им стили как на вашем меню, убрал бы правый бордер для последнего пункта. В итоге меню выровняется по центру и будет также как и на картинке 2.

  • роман Апр 26, 2013 в 9:40

    Заур не подскажите как перенести горизонтальное меню с верхнего положения под шапку

    • Заур Магомедов
      Заур Магомедов Апр 26, 2013 в 10:25

      Открыть на редактирование html-код шаблона, найти строчки которые отвечают за вывод горизонтального меню и переместить данный код после закрывающего тега div шапки сайта. Это уже чистый html.

      • Роман Апр 26, 2013 в 21:25

        все равно не могу найти эту позицию может и нахожу но он в столбик все выставляет помогите шаблон стандартный Beez_20

        • Заур Магомедов
          Заур Магомедов Апр 26, 2013 в 23:48

          Могу помочь, только не сейчас, а через несколько дней.

          • Роман Апр 27, 2013 в 9:12

            Заур а как открыть Html код на редактирование???

            • Заур Магомедов
              Заур Магомедов Апр 28, 2013 в 21:56

              Открываете файл с html-кодом любым текстовым редактором, например, блокнот, а еще лучше будет noutepad++. Я пользуюсь адобовскими программами, в данном случае — adobe dreamweaver

  • Аман Апр 01, 2013 в 6:13

    Привет,скажите пожалуйста почему на дизайне №341 в системе ucoz нельзя горизонтальное меню по центру с выпадающими пунктами,если я его вставляю и в CSS и верхнюю часть сайта,то надписи в блоке «Статистика» и в блоке «Наш опрос» не видно

    Skype:a9m9aka скрин скину

    • Заур Магомедов
      Заур Магомедов Апр 01, 2013 в 7:54

      Аман, я с системой Ucoz не работаю, но скажу, если там предусмотрено править html-код и css, то настроить можно все. Просто вам не хватают знания html и css. Вы подучите данный язык разметки, тогда 90% вопросов сами собой отпадут.

  • Аман Мар 27, 2013 в 19:50

    Скажи пожалуйста как «поиск по сайту» сделать в нижнем правом углу шапки?Подробно пожалуйста

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

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

      • Аман Мар 27, 2013 в 20:34

        Хорошо,спасибо

  • Аман Мар 27, 2013 в 13:24

    У меня на сайте http://amangeldy.ucoz.com/ есть «Главная» «Меню для сайта» и «Жанры фильмов» так я хочу чтобы «Главная» была без выпадающих пунктов,а «Меню для сайта» и «Жанры фильмов» остались с выпадающими пунктами.Можно ли это как то сделать?Если да напишите подробно пожалуйста.

    • Игорь Мар 27, 2013 в 13:33

      Аман, в этом топике Вам дан код для всего меню с выпадающими подпунктами, если в Вашем меню пункт «ГЛАВНАЯ» без выпадающих подпунктов, то здесь автоматитически ничего выпадать не будет.
      То есть уберите, или скройте, подпункт «Главная страница» в пункте «Главная» и все будет так, как Вы и хотите. Это можно сделать в админ-панели.

      • Аман Мар 27, 2013 в 14:19

        http://amangeldy.at.ua/ я на этом сайте сделал,но что то близко они стоят,как сделать нормально

        • Аман Мар 27, 2013 в 14:22

          Ой простите,всё получилось спасибо.

  • Аман Мар 27, 2013 в 10:33

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

    • Заур Магомедов
      Заур Магомедов Мар 27, 2013 в 10:44

      Не совсем понял вопрос? Уточните пожалуйста, что вы имеете ввиду.

  • Аман Мар 24, 2013 в 12:07

    Skype:a9m9aka,vk http://vk.com/amangeldy98 пожалуйста помоги у меня много вопросов.

  • Аман Мар 24, 2013 в 12:05

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

    • Заур Магомедов
      Заур Магомедов Мар 24, 2013 в 18:10

      Какую еще стрелку? На выпадающих пунктах?

      • Аман Мар 25, 2013 в 16:56

        Кнопка вверх как у вас синия

  • Аман Мар 22, 2013 в 20:09

    Блин большое вам спасибо!!!! Всё работает прекрасна.Я вам очень благодарен!

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

      Не за что, рад помочь…

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

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

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

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

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