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

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

6bb707c98a49467b9cc9eda4a2ac8934.jpg

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

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

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

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

Прошу направить падавана в верном направлении.
  • Вопрос задан
  • 2809 просмотров
Решения вопроса 2
mlnkv
@mlnkv
JavaScript Developer
svg вам в помощь
Ответ написан
Комментировать
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Инфо где можно изучить SVG?
Примеры анимации и SVG

Примечание: с помощью прямой вставки SVG формируются элементы, которые:
— присутствуют в DOM
— оформляются с помощью CSS (значит точно так же анимируются)
— участвуют в модели событий, а значит, можно в них слушать эти самые события (а можно и делегировать)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
baskerville42
@baskerville42
Учусь работать (Junior)
Пока что трансофрмация в браузерах на стадии зарождения, но уже что-то можно пробовать делать
Вам это конечно не подойдёт, но я всё же пять копеек вставлю jsfiddle.net/nxrj482d/1
Ответ написан
@neol
SVG не поддерживается в IE<9. Если это проблема, то используйте htmlbook.ru/html/map
Ответ написан
Комментировать
Можно сделать используя area и map, работает даже в старых браузерах
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы