Горизонтальное меню с наклонными разделителями

[dropoff]

Доброго времени сток!

Ребята, такой вопрос.

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

Получается примерно так

Вопрос в том, как правильно вырезать картинку с разделителем при ховере(hover). Нужна именно картинка! Т.е. нужна кроссбраузерность, минимум от ie7.

При этом ширина пунктов меню не должна быть фиксированной.

На форуме не смог найти темы. Хотя по идее они должны быть.

Буду признателен за помощь.

Edited January 10, 2013 by dropoff

[Yazon_Nile]

Да можно и не картинкой, а через :after+:before и бордеры.

[Justnewone]

А ie7 конечно же понимает и :after, и :before?

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

[dropoff]

Да можно и не картинкой, а через :after+:before и бордеры.

А не сможете мелкий пример сделать? Я если честно не представляю как сделать можно.

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

Одинаковая ширина не пойдет. Тогда все пункты не влезут в меню. Там есть и длинные слова и короткие. Например "О нас" и "Рекомендуемые". Да и будет не очень красиво.

Помню давно встречал наборы меню и там такое было. Но что-то не найду.

тут же еще получается так, что активный пункт меню не сделать. Если например будет активный пункт меню "О Нас" и рядом будет "Рекомендуемые", то при наведении на "Рекомендуемые" придется убирать активность у "О нас".

[npofopr]

Есть очень хороший сайт http://www.cssplay.co.uk/menus/

Не поленитесь, посмотрите все примеры. Где то в середине есть и ваш пример.

[dropoff]

не наше нормальных примеров. Просмотрел процентов 95 всех меню.

Есть несколько штук, но реализация не такая как хотелось. Либо много кода, либо всякие фиксы под IE. Ковыряю сейчас один. Но реализация не удобная. Добавляет em, b, span дополнительно, что не очень, имхо.

На хабре видел статью по такому меню, но что-то не найду. А как правильно гуглить, чтобы с учетом Наклона или как правильно?

Сам не напишу наверное. Дольше разбираться придется :\

Edited January 10, 2013 by dropoff

[npofopr]

http://codepen.io/jeradg/pen/AzpuG