Menu circulaire autour d'une image

Hello à tous

J'essaie de créer un menu qui s'étend autour d'une image de façon circulaire. Sans même parler de design ou quoi que ce soit d'autre pour l'instant, je ne me concentre que sur la base : la structure et le positionnement des éléments pour commencer. Voici le rendu que je souhaite obtenir :



J'avais tenté des trucs avec float et position, mais c'est atroce à gérer, alors je me suis plutôt orienté vers grid layout pour arriver à mes fins. J'ai découpé l'ensemble en une grille de 10x3 et voilà ce que j'ai réussi à produire :

https://codepen.io/Loraga/pen/pobJozx

L'avantage avec grid layout c'est que c'est plus facile à utiliser et la version responsive de ce menu sera hyper simple à produire.

Vous en pensez quoi ? Je me demande si c'est une base "propre" pour ce genre de menu. c'est la première fois que je dois faire un truc du genre, qui sorte un peu de l'ordinaire, donc je doute de moi et je suis loin d'être doué en CSS ^^

Est-ce qu'il y a d'autres méthodes -sûrement, oui- qui sont plus simple à mettre en œuvre, ou plus propre pour faire ce genre de choses avec CSS ?

Merci d'avance pour votre précieuse aide comme d'habitude, et bon week-end à tous

Bonjour,

Une grid est une possibilité. Et effectivement, tu as peu de calcul à faire.

Mais je préfèrerais simplement une position:relative pour la balise <nav>, une image qui remplit toute la <nav>, et les <a> en position absolute autour de la <nav> (du coup, on les met vraiment où on veut; mais c'est vrai qu'il faut un peu calculer pour les positions).

Par exemple, voici un version ou le rond fait 50% du mini entre la largeur de la fenêtre et la hauteur de la fenêtre (le reste est positionné avec des pourcentages). Tu noteras l'obtention de positions parfaitement symétrique en utilisant d'un côté left et de l'autre right pour le positionnement horizontal :

https://jsfiddle.net/parsimonhi/5gqp8r0v/

Le html est réduit au minimum. Le css (mis à part peut-être le calcul des pourcentages, et encore, ici, ce n'est pas plus compliqué que de choisir la bonne case dans une grid) est assez simple. L'ensemble est responsive dans de bonnes conditions jusqu'à une largeur minimale de fenêtre de 19em (si l'em vaut 16px, ça fait 304px). En dessous, ça reste quand même harmonieux, mais l'utilisateur devra scroller horizontalement.

Tout ça peut être adapté facilement.

Amicalement,
Modifié par parsimonhi (10 Oct 2020 - 16:30)

bonsoir,

l'idée de se baser sur un grille et de dispatcher les elements dedans est bonne, simple et efficace, si ton nombre de lien est immuable, il n'y aura plaus besoin de toucher au style.

Mais, pour aussi apporter une répnse et te conforter dans ton approche, Il y aurait aussi les variables CSS var(--mavar) et calc() en se basant sur un système de rotation via transform peut faciliter l'ajout/retrait d'un élément , grid ou flexpour centrer le logo et position relative/absolute; .
Peut-être plus complexe a établir mais simple à mettre à jour via une seule valeur par la suite (ex : 6 si 6 liens ou trois liens a dispatcher que sur une moitié du cercle)

démo de l'idée https://codepen.io/gc-nomade/pen/ExyjPqL inspiré pour le placement de https://codepen.io/gc-nomade/pen/rybOmw / https://codepen.io/gc-nomade/pen/GWLZKv
Modifié par gcyrillus (10 Oct 2020 - 22:40)

Hello

Merci à vous deux pour le partage de vos solutions et pour le temps que vous y accordez ! C'est super intéressant et efficace comme approches

Gcyrillus, c'est énorme comme solution et j'aime beaucoup le côté calculé d'avance en se basant sur une variable, CSS m'étonne toujours car il y a moyen dans certains cas de véritablement programmer des comportements, bravo en tout cas !

Bon, j'ai plus qu'à étudier tout ça, merci encore !