Правильная верстка горизонтального меню с разделителями

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

Пишем HTML-код:

<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>

Теперь CSS:

ul {overflow: hidden; zoom: 1;}
li {list-style: none; float: left; border-left: 1px solid #666; padding: 0 20px; margin: 0 1px 0 -1px;}

Вот собственно и все. Однако хочу остановится на моменте скрытия первого разделителя. Если вы заметили, то я не использовал класс для первого элемента списка, а задал отрицательный margin влево, чтобы скрыть разделитель.

Код кроссбраузерный: IE6+, Opera 9+, Firefox 2+, Chrome, Safari

Смотрим ДЕМО

Метки: , , ,

Комментарии

  1. dimka 13.08.2010 в 10:05 #

    Изящный способ ! Спасибо !

    Однако вопрос, почему для ul мы использовали overflow: hidden; zoom: 1; ? Если убрать overflow: hidden; то появляется разделитель слева, но почему так, ведь Вы сказали, что для избавления от этого разделителя мы использовали отрицательный margin ?

    И ещё вопрос, zoom: 1; — это чтобы IE скушал ?

    • Neolot 13.08.2010 в 10:50 #

      Отрицательный margin сдвигает LI за пределы списка, а overflow: hidden для UL скрывает все, что находится за его границами, поэтому разделитель не видно.

      zoom нужен, чтобы IE корректно обработал overflow: hidden

      • dimka 13.08.2010 в 10:55 #

        Понял, спасибо за хороший ответ !

  2. Юрий Ключевский 17.09.2010 в 19:36 #

    Изящный способ. Спасибо

  3. Отец Михаил 27.09.2010 в 13:15 #

    а если разделители по дизайну не такие банальные, как бордер, остается их запихивать в li или div? меню генерится динамически, проблем со скрытием первого/последнего нет

  4. ss 08.02.2011 в 04:33 #

    Бля это немного не то...

    но спасибо тебе человечише!!!!

    я заебался искать то что мне нужно сука!!!

    и только ты лишь меня намысль навел что бы не ебать мозг а просто впиздохать на html меню в линию в шапке

    ебать спасибо!!!

  5. partisan 08.02.2011 в 23:05 #

    Правильно то правильно, но некрасиво. Бордюрчики получаются непропорционально громадными.

    Гугль не стесняется писать в строчку без списка просто через |||

    Хороший способ через добавление символа «|» в стиль через псевдокласс :before или :after, но для IE6-7, если вы их поддерживаете придется использовать expression (см. Яндекс.Субботник, где Виталий Харисов рассказывает по сабжу)

  6. Матвей 02.12.2011 в 14:51 #

    Если разделители по дизайну не такие банальные как бордер,

    то я использую их как list-style

    li {list-style: url(../images/___.png);}

    При этом первоначально упомянутый бордер просто удаляю.

    • Neolot 02.12.2011 в 14:55 #

      list-style с картинкой некорректно работает в IE6-7, лучше использовать background

      • Матвей 02.12.2011 в 17:23 #

        Согласен, работа с background оказалась намного приятнее!!!

Ваше мнение

Если вам нужно вставить код, оберните его в специальный шорткод [php], [html], [css], [js].
Например: [js]Ваш код[/js]