Разделители меню
30 марта 2012, 18:05
Многие дизайнеры делают меню вот с такими разделителями:
Самое простое, что приходит на ум — просто убрать разделитель у первого пункта с помощью псевдо-элемента :first-child. Но вылезает один существенный недостаток:
Для решения этой задачи понадобится обернуть пунткы меню в отдельный блок. Учитывая, что меню чаще всего делается списком, обёртка в виде ul уже есть. Далее, с помощью position: relative и свойства left пункты меню сдвигаются влево на расстояние ширину разделителя, а к обёртке применяется свойство overflow: hidden, скрывающее ненужные разделители:
Всё выглядит как надо. И к тому же работает даже в старичке ИЕ6. Осталось лишь прочитать никому ненужный листинг кода:
<style type="text/css">
.menu {
list-style: none; padding: 0; margin: 0; /* обнуляем стили */
position: relative;
overflow: hidden; /* самое важное */
}
.menu li {
white-space: nowrap; /* чтобы не было переносов внутри пункта меню */
padding-right: 10px;
padding-left: 20px; /* слева отступ больше на ширину разделителя */
background: url(bullet.gif) no-repeat;
position: relative;
left: -20px; /* сдвигаем на расстояние отступа слева */
}
</style>
<body>
<ul class="menu">
<li><a href="#">Привет!</a>
<li><a href="#">Я меню</a>
<li><a href="#">с разделителями</a>
</ul>
</body>