Как лучше реализовать такую круговую навигацию?

Question

[Legioner911]

Здравствуйте.

Сразу извиняюсь за некорректность вопроса.
Но очень хотелось бы услышать мнение профессионалов в сфере веб и в частности фронтэнда.
На данной странице https://rosreestr.ru/site/ur/ реализована навигация в виде круга, подписана "Способы получения услуг". На сайте rosreestr она еализована с помощью SVG.
Существуют ли кроссбраузерные методы реализации такой же навигации.
И каким способам вы бы отдали предпочтение. (кроме SVG).

Заранее спасибо за компетентный ответ, от знающих людей.

Answer 1

[Nikolay Talanov]

1) Свг. Оно для этого лучше всего подходит. Денис посоветовал D3, это наверное самый классический вариант.
2) Можно на канвасе. Но на фоне свг это оверкилл, и его надо юзать только если вы захотите сделать что-то невероятно уникальное с какими-то неприлично крутыми эффектами.
3) Можно на css. Валентин дал ссылку на codrops демку, но есть еще более старая и не менее крутая версия - stackoverflow.com/questions/13132864/creating-a-ra...
Правда там имеются некоторые проблемы, ибо демку с тех пор никто не фиксил, скинул просто для ознакомления с "темной магией".
Так же еще чекните вот это - sarasoueidan.com/tools/circulus
Крутой интрумент от Сары, с помощью которого можно кастомизировать меню как следует. Но оно в плане дизайна не совсем подходит в вашем случае.

Comments

[Legioner911]

Здравствуйте, Николай!
Спасибо Вам огромнейшее за такой развернутый ответ!

Answer 2

[Денис Инешин]

Это элементарно делается на d3js.org (да это SVG, но через JS API)
Вот туториал: zeroviscosity.com/d3-js-step-by-step/step-2-a-basi...

Comments

[Legioner911]

Здравствуйте, Денис.
Спасибо за ответ.

Answer 3

[Валентин Дубровский]

если не svg, или canvas - то можно так tympanus.net/codrops/2013/08/09/building-a-circula... , но имхо делать не svg или канвасом, это извращение.

Comments

[Legioner911]

Здравствуйте, Валентин. Спасибо Вам за ответ.
А не подскажите, может есть у вас на примете уроки в которых бы рассматривалась данная(или похожая) ситуация с помощью SVG.

Answer 4

[Vitaly Sivkov]

Есть пример посложнее в этом видео: https://youtu.be/4P1-JwZF0Vo?t=59m38s
Минус в том что пишут на CoffeeScript, хотя возможно для кого-то это плюс
Есть попроще, на JS, но статья на английском: sarasoueidan.com/blog/building-a-circular-navigati...

Comments

[Legioner911]

Виталий, Спасибо что ответили.
Для меня чем легче тем лучше)
В CoffeeScript к сожалению я не силен.

Answer 5

[Юрий Чижов]

все забывают про карты img map эх...
htmlbook.ru/content/karty-izobrazheniya