Comment implémenter un menu Radial/Pie dans CSS3?

Question

Je voudrais mettre en œuvre un radial menu en utilisant CSS3 transforme des animations similaires à la troisième démo dans ce . Il y a une implémentation dans jQuery en utilisant le canvas Radmenu mais il ne bouge pas aussi facilement que le flash.

La première question serait: est-ce faisable? Si possible, n'utilisez que des transformations 2D et des animations pour que cela fonctionne sur plusieurs plates-formes.

Deuxième question: Où le faire? les exemples CSS3 simples montrent comment traduire, cisailler, mettre à l'échelle et faire pivoter des objets simples. Mais je n'ai aucune idée par où commencer à chercher des informations sur la façon de mettre en œuvre un menu comme le flash.

Answer 1

J'aurais simplement répondu au commentaire de rsilva, mais malheureusement je n'ai pas assez de rep, donc je m'en excuse.

S'il vous plaît n'hésitez pas à emprunter/voler de http://wewillbeok.com/radial, mais soyez averti que ce n'est certainement pas le code le plus propre et n'est pas documenté dans le moindre bit. Et Yi Jiang a raison de dire que les animations que j'utilise ont un mauvais rendement sur les anciens navigateurs. Supprimer l'animation "zoom" améliore considérablement les performances.

Une autre implémentation bien documentée et performante est disponible ici: http://www.webtoolkit.info/javascript-pie-menu.html, bien qu'elle ne soit peut-être pas aussi "fantaisie". Donc, pour répondre plus directement à votre question, je pense que vous auriez du mal à créer un tel menu en utilisant purement des animations CSS3, si c'est ce que vous cherchez, mais c'est tout à fait possible avec une combinaison de JS et CSS3. La mise en œuvre idéale se situe probablement quelque part entre tous les exemples mentionnés jusqu'à présent.

Answer 2

Pour la plupart, il doit y avoir une couche JavaScript pour calculer la distribution des éléments. CSS3 peut être utilisé pour faciliter la mise à l'échelle et la rotation des éléments en effectuant des transformations. Ils fonctionnent sur Chrome, Safari, IE9 +, FireFox 3.5+ et Opera 11+.

J'ai créé un plugin il y a quelques temps, le plugin jQuery Radmenu (menu radial). Je travaille sur une bonne démo de son utilisation (je ne suis pas un designer et ça me prend un peu de temps), mais pour avoir une idée de la puissance du plugin, vous pouvez consulter http://www.tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4 pour quelques exemples.

La spécification de l'API est disponible et peut être téléchargée. N'hésitez pas à le partager avec GitHub si vous cherchez à apprendre. https://github.com/nirvanatikku/jQuery-Radmenu-Plugin

Ne hésitez pas à me ping si vous avez des questions

Answer 3

un look here

cela se transforme une sélection dans un menu à tarte, styleable via css, pas aussi chic que ci-dessus. utilisation

: $("#your-selectbox-id").pieselmenu($(this));