Часто начинающие верстальщики сталкиваются с трудностями при верстке горизонтального меню с вертикальными разделителями. Сегодня я хочу рассказать, как легко сделать кроссбраузерное горизонтальное меню с максимально чистым кодом.
Пишем 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
Смотрим ДЕМО
Изящный способ ! Спасибо !
Однако вопрос, почему для ul мы использовали overflow: hidden; zoom: 1; ? Если убрать overflow: hidden; то появляется разделитель слева, но почему так, ведь Вы сказали, что для избавления от этого разделителя мы использовали отрицательный margin ?
И ещё вопрос, zoom: 1; — это чтобы IE скушал ?
Отрицательный margin сдвигает LI за пределы списка, а overflow: hidden для UL скрывает все, что находится за его границами, поэтому разделитель не видно.
zoom нужен, чтобы IE корректно обработал overflow: hidden
Понял, спасибо за хороший ответ !
Изящный способ. Спасибо
а если разделители по дизайну не такие банальные, как бордер, остается их запихивать в li или div? меню генерится динамически, проблем со скрытием первого/последнего нет
Да, в любой тег можно завернуть
Бля это немного не то...
но спасибо тебе человечише!!!!
я заебался искать то что мне нужно сука!!!
и только ты лишь меня намысль навел что бы не ебать мозг а просто впиздохать на html меню в линию в шапке
ебать спасибо!!!
Правильно то правильно, но некрасиво. Бордюрчики получаются непропорционально громадными.
Гугль не стесняется писать в строчку без списка просто через |||
Хороший способ через добавление символа «|» в стиль через псевдокласс :before или :after, но для IE6-7, если вы их поддерживаете придется использовать expression (см. Яндекс.Субботник, где Виталий Харисов рассказывает по сабжу)
Если разделители по дизайну не такие банальные как бордер,
то я использую их как list-style
li {list-style: url(../images/___.png);}При этом первоначально упомянутый бордер просто удаляю.
list-style с картинкой некорректно работает в IE6-7, лучше использовать background
Согласен, работа с background оказалась намного приятнее!!!