cssing :: Архив :: Разделители в меню

Разделители в меню

Довольно часто на практике встречаются меню с разделителями - например:

О том как сделать такое меню с минимумом правильного HTML кода и пойдет дальше речь.

HTML

Очевидным HTML для подобных конструкций служит ненумерованный список UL, вот например такой:

1. <ul id="nav">
2. <li><a href="#">Главная</a></li>
3. <li><a href="#">Новости</a></li>
4. <li><a href="#">Каталог</a></li>
5. <li><a href="#">Рейтинг</a></li>
6. </ul>

Конечно если бы мы тупо и цинично рубили бабло © мы могли бы написать что то вроде:

1. <a href="#">Главная</a> | <a href="#">Новости</a> | <a href="#">Каталог</a> | <a href="#">Рейтинг</a>

Но по причине совсем не циничной рубки (© Flack), а так же истокам проблемы с этим меню, и вдобавок семантики кода так лучше не поступать.

Как обычно делалось

Обычно для получения результата - то есть меню с вертикальными разделителями, приходилось задавать левую (или правую) границу для каждого элемента(здесь я опускаю код позиционирующий меню, он есть в примерах):

1. #nav li{border-left:1px solid #000}

Таким образом мы получали что то вроде:

Не совсем то что нам надо, так как разделители на то и разделители что бы быть только между пунктами, а они у нас сейчас находятся просто слева от каждого пункта. Ранее эта проблема для меня решалась вставкой класса для первого элемента:

1. <ul id="nav">
2. <li class="first"><a href="#">Главная</a></li>
3. …

И потом добавлением правила:

1. #nav li.first{border:none}

И все вроде бы работает как надо. Но. Оба эти подхода(с class=”first” и с текстовыми разделителями “|”) требуют от нас несимметричной генерации элементов - надо различать первый и все остальные LI.

Проблема(лень)

Так как мои меню генерировал движок, то для вставки этого класса пришлось бы менять код движка, а лезть туда мне было лень. Отсюда родилось решение как сделать такие разделители не вставляя никаких классов и оперируя лишь обычным списком.

Решение

Идея простая как 5 копеек. Вот весь код:

1. #nav{
2. overflow:hidden;/* что бы UL растянулся до содержимых float во всех броузерах кроме ИЕ, а так же для нашего “обрезания”*/
3. width:100%;/* что бы UL растянулся до содержимого в ИЕ, к самому трюку имеет косвенное отношение*/
4. }
5. #nav li{
6. margin-left:-1px;/*сдвигаем все элементы влево*/
7. }

Суть такова. Задаем overflow:hidden для UL - таким образом все что выходит за пределы блока UL отображаться не будет. Затем задаем margin-left:-1px для всех элементов списка, то есть первый элемент выйдет на 1 пиксель за пределы элемента UL, но это как раз и будет тот лишний злополучный первый разделитель! Все же остальные разделители останутся в деле - так как не выйдут за пределы блока. А первый будет скрыт. В результате получим:

Смотреть пример

Идея

Эта же идея только с заменой на border-top и margin-top:-1px сработает и для таких меню:

Смотреть пример
Более того такой прием можно применять и для графических разделителей. Будь они даже потолще одного пиксела - просто придётся задавать больший отрицателый отступ для элементов списка.

В конце

Хотя прием и довольно узкоспециализированный но мне сэкономил время, да и идея мне понравилась. Тестировалось и работает во всех моих виндошных броузерах(IE5-7, FF, Opera). Думаю работает везде.

• Рабочий пример для горизонтальных разделителей
• Рабочий пример для вертикальных разделителей
• “Навигация по-русски” - пост двухлетней жавности про эту идею

Буду рад услышать Ваше мнение или приемы по этому поводу!

XHTML/CSS