vetsmen: полагаю, с помощью CSS это единственный существующий не замороченный способ сделать подобное - просто расположить ваши блоки по всей длине окружности. Да, придётся задавать угол, но это достаточно просто, как с препроцессорами, так и с JS. Для SVG и canvas потребуется значительно больше расчётов.
"А второе, каким образом потом его крутить с анимацией?" - вот это неожиданный вопрос. Почему бы не так же, как повернуты карты - с помощью rotate?
myskypesla: вы уверены что санкции были именно по этому поводу?
Я спрашиваю ни в коем случае не в рамках спора, просто подавляющее большинство тем под wordpress как раз используют приведенный мной принцип - два элемента меню для разных устройств - и если это правда плохо для SEO, то это вдвойне удивительно для такой популярной системы. Хотя может я чего-то не знаю.
myskypesla: выбранный вами путь очень сложный, мне кажется. Даже просто сделать два блока для меню - десктопный и мобильный - было бы проще, ведь останется просто показывать один из них и скрывать другой.
Но если очень надо, то в принципе можно и так. В вашем коде лучше проводить проверку начиная с нижнего брейкпоинта, т.к. при ширине окна в 300 пикселей выполнится часть кода предназначенная для ширины меньше или равной 1440 пикселям.
Exploding: разгадка этой тайны появится в комментах к вопросу через несколько минут, а пока можете попробовать поэкспериментировать, например задать body паддинги, или например попробовать зафиксировать элемент body в центре окна и сделать ему ширину 50 пикселей. Можно также выполнить в консоли этот код и посмотреть на результат:
"а присваивать его первому дочернему элементу это уже костыль" - вот это я не очень понял. Когда-то давным давно, когда люди выяснили, что бананов может быть не только 5 или 7, а например 5 и еще чуть больше половины банана, они придумали такой костыль, как вещественные числа, а потом еще придумали комплексные, а это уж вообще костыль чистой воды.
Что может быть плохого в передаче фокуса первому интерактивному элементу в попапе, с технической точки зрения?
horosami: кстати если вы пытались просто подставить ваш массив в data.children, то всё это не работало потому что шаблон не соответствовал вашей структуре. Поправьте шаблон в соответствии с вашей структурой, все отрендерится. Вот прямо здесь можно редактировать.
horosami: вы не обижайтесь, но раз это задача, то почему бы не уделить 15 минут статейке с примерами рекурсии? Там ничего сложного, серьезно. К тому же я вам выше описал алгоритм. Просто реализуйте алгоритм, а если что-то будет не работать, отписывайтесь в комментарии.
horosami: а в чем собственно вам нужна помощь, если у вас даже есть рабочий код?
Если проблема с выводом, то просто создаёте функцию, которая создаёт список, передаёте ей ваш массив. После создания элемента списка, например, можно проверять есть ли у элемента дети, и если есть, то в этом же элементе создавать еще один список, то есть вызывать эту функцию еще раз. Тучи примеров рекурсии можно найти в гугле.
secretsergey: на самом деле работоспособность предложенного варианта прямо зависит от того, для каких элементов вы генерируете клики. Существуют случаи, когда все эти клики будут игнорироваться, т.к. потому что они untrusted - сгенерированы не в результате действий пользователя. Будет проще если вы хотя бы разметку покажете.
CSS