Часто начинающие верстальщики сталкиваются с трудностями при верстке горизонтального меню с вертикальными разделителями. Сегодня я хочу рассказать, как легко сделать кроссбраузерное горизонтальное меню с максимально чистым кодом.
Пишем 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>
<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;}
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
Понял, спасибо за хороший ответ !