Горизонтальное меню по центру

6 февраля 2010 года | Вёрстка

Горизонтальное меню по центру

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

  1. Меню должно быть горизонтальным.
  2. Элемент меню может быть любой ширины.
  3. Элементы меню должны быть выровнены по центру.

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

В конце этой статьи, я оставлю ссылочку на готовый пример. А сейчас всё по порядку. Первым делом нам нужна блочная обвёртка, а внутри неё разместим список, при помощи комбинации тегов ul и li. Внутри списка добавим ссылки, т. к. без ссылок это не меню:

<div class="menu">
  <ul>
    <li>
      <a href="#">Главная</a>
    </li>  
    <li>
      <a href="#">Новости</a>
    </li>  
    <li>
      <a href="#">Контактная информация</a>
    </li>  
    <li>
      <a href="#">О проекте</a>
    </li>  
  </ul>
</div>

Теперь нам нужно прописать основные стили для обвёртки. Для примера, я сделал его шириной 70% и выровнял по центру экрана, а также скрыл всё лишнее:

.menu {        
  width: 70%; /* задаю ширину */
  clear:both; /* обтекание */
  margin: 100px auto;  /* выровняю по центру */
  overflow: hidden; /* спрячу лишнее */
  background-color: #06c; /* синенький фон */
}

Горизонтальное меню по центру, рис. 1

Смотрим глубже, на очереди сам список. Прокомментирую каждую строчку, чтобы было понятно для чего нужен каждый параметр:

.menu ul {
  height: 30px; /* установим высоту меню */
  float:left; /* прижимаем влево */
  left:50%; /* смещаем на 50% */
  list-style-type:none; /* убираем маркеры */
  margin:0 auto; /* выравниваем */
  padding:0; /* убираем внутренние отступы */
  position:relative; /* пригодится для элементов списка */
}

Дальше у нас элементы списка. Именно в этом месте и задаётся нужное нам позиционирование в центре обвёртки:

.menu ul li {
  float:left; /* прижимаем влево */
  position:relative; /* позиционируем относительно родителя */
  right:50%; /* интересный момент, отступаем справа на 50% */        
}

Горизонтальное меню по центру, рис. 2

Осталось только привести в порядок ссылки:

.menu ul li a {
  line-height: 30px; /* выравниваю ссылки по высоте */
  background-color: #06c; /* синий фон =) */
  color: #fff; /* пишу белым */
  padding: 2px 5px; /* внутренние отступы для удобства */
  margin: 0 10px; /* добавляю отступы между элементами меню */
  font-size: 14px; /* размер шрифта */
}

.menu ul li a:hover {
  text-decoration: none; /* при наведении убираем подчёркивание */
}

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

Горизонтальное меню по центру, рис. 3

И конечно, как и обещал в начале статьи, всё можно оценить в живую, смотрим рабочий пример.

Протестировал в браузерах поддержка: IE6+, FF, Opera 9.62+, Chrome+, Safari 3+. Возможно поддерживают и более ранние версии, но я думаю, на них уже не стоит обращать внимание.

  • Сергей

    Спс :-)
    Только эту статью было б хорошо прочесть перед статьей о первом по последнем элементе из списка :)

  • Дмитрий

    Спасибо за статью, помогла
    искал вот это
    position:relative; /* пригодится для элементов списка */

    Иначе ie6 ни как не хотел их в горизонталь поставить

  • divbyzero

    А я рад, что вам статья помогла.

  • http://medialworld.com sad

    Хм… интересное решение. Чет раньше не встречал такого. Хотя мне не так часто и меню центровать приходилось. Мож именно поэтому и не сталкивался.

  • Твердов Андрей

    То что надо. Простое решение и объяснено детально. И без кучи всякой воды.

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

    Спасибо.

  • Katia

    Большое Вам спасибо! Создала точно такое же меню для своего будущего сайта. А скажите пожайлуста как сделать так чтобы при открытии одного из разделов меню, оно отображалось во всех разелах сайта. Сайт у меня не большой (пробный вариант) поэтому всего 3 раздела. В каждом документе я продублировала этот html (мне так удобней), но меню все равно не отображается при переходе в другой раздел

  • Selenit

    Строго говоря, нужно это не для элементов, а для того, чтобы сработало смещение (left:50%) для самого ul.

    Хотя, на мой взгляд, display:inline/inline-block для li и text-align:center для ul решают эту задачу куда проще и надежнее, чем все хаки с двойным смещением float-ов вместе взятые :)

  • http://www.facebook.com/people/Kazarinov-Yan/1249220296 Kazarinov Yan

    Всё бы хорошо в этом примере. Но выпадающее меню при таком раскладе не сделаешь! Ведь : overflow: hidden; /* спрячу лишнее */А это значит, что всё что будет выпадать – будет обрезаться.

  • Sanyok 04

    Таблицой получится ровно столько же кода, и меньше ксс