Разделители меню
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>