Как создать меню для сайта необычной формы с элементами анимации?

Question

[Kekoc]

Здравствуйте.
Мне необходимо создать меню произвольной формы -



У меню есть пункты и анимированные объекты в верхней части (ушки). Решил попробовать сделать это с помощью картинок , но тогда при определении события для пункта меню (в данном случае меню 1) будет выделена вся форма картинки, а не только сам пункт меню.

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

Поэтому возник вопрос с какой стороны подойти , рассматривал как вариант использование Flash , но пока отложил в сторонку т.к. у него проблемы с мобильными устройствами , а их всё больше.

Рассматривал также варианты с CSS , но там достаточно сложно создать не стандартные объекты , и не все примеры работают, опять же могут возникнуть проблемы со старыми версиями браузеров(особенно IE).

Прошу направить падавана в верном направлении.

Answer 1

[Сергей Мельников]

svg вам в помощь

Answer 2

[Евгений Петров]

Инфо где можно изучить SVG?
Примеры анимации и SVG

Примечание: с помощью прямой вставки SVG формируются элементы, которые:
— присутствуют в DOM
— оформляются с помощью CSS (значит точно так же анимируются)
— участвуют в модели событий, а значит, можно в них слушать эти самые события (а можно и делегировать)

Answer 3

[Alexander Tartmin]

Пока что трансофрмация в браузерах на стадии зарождения, но уже что-то можно пробовать делать
Вам это конечно не подойдёт, но я всё же пять копеек вставлю jsfiddle.net/nxrj482d/1

Comments

[Евгений Петров]

Ну давно уже не на стадии зарождения:)
Ровно та же картина и для SVG, только ещё и Opera mini поддерживает. К SVG применяются те же трансформации, так что простору для фантазий навалом:)

Просто в SVG можно изначально не только прямоугольники со скруглёнными краями создавать.

[Alexander Tartmin]

@Petroveg по поводу SVG согласен, с ним можно вообще невероятные вещи делать, но использовать его сложнее (имхо).

[Евгений Петров]

@baskerville42 да там не так много элементов — с вашими знаниями недолго. Прочитать, потренироваться, прочитать ещё разок — и в путь:)

Answer 4

[neol]

SVG не поддерживается в IE<9. Если это проблема, то используйте htmlbook.ru/html/map

Answer 5

[Андрей Голуменов]

Можно сделать используя area и map, работает даже в старых браузерах