Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

En ligne The Pulpit Rock Fig - Image fournit par LoremPixel Version en ligne Tutoriel Créer un menu circulaire Table des matières Créer un menu circulaire La partie xHTML CSS L'animation en Javascript Améliorations sympas Créer un menu circulaire Dans ce

The Pulpit Rock Fig - Image fournit par LoremPixel Version en ligne Tutoriel Créer un menu circulaire Table des matières Créer un menu circulaire La partie xHTML CSS L'animation en Javascript Améliorations sympas Créer un menu circulaire Dans ce tutoriel je vais vous expliquer comment créer un menu circulaire sympa J'utilise ce menu sur mon site et je voulais partager son style qui peut rendre votre site plus original qu'un autre Ce menu est développé en Javascript avec un peu de CSS et de xHTML Je vous conseille de relire le tutoriel de M teo si vous ne vous rappelez pas vraiment du CSS et du xHTML Il peut aussi être pratique de conna? tre le cercle trigonométrique pour plus d'informations lisez le tutoriel de Kayl annexe sur la trigonométrie Voici un aperçu du résultat que vous obtiendrez après ce tutoriel C'est le menu de mon ancien site il est bien sûr animé Le style est évidemment paramétrable à votre guise c'est simplement du CSS Voici un exemple de menu créé à partir des codes donnés dans ce tutoriel Il n'y a pas de CSS additionnel Exemple de menu circulaire animé La partie xHTML CSS Pour faire un site vous savez sûrement qu'il faut conna? tre le xHTML et aussi le CSS En ?n le CSS n'est pas obligatoire mais fortement conseillé Ici nous allons faire la partie concernant le CSS et le xHTML du menu l'armature si vous voulez Un menu est souvent voire même tout le temps une liste Nous allons donc créer la liste Voici le code Menu C Centre Menu Menu Menu Menu Menu Le div appelé centre c'est le centre du menu Nous nous servirons de ses positions et de sa taille pour faire tourner le menu Je vous propose de faire un lien vers la page d'accueil au centre du menu Mettez bien le tout dans un div dont l'id est menu ça servira pour l'animation du menu dans la prochaine partie du tutoriel Il servira aussi pour le style pour avoir un style di ?érent du reste du site pour le h par exemple Vous remarquerez sûrement les id vous pouvez avoir autant de boutons que vous voulez dans le menu mais il faut mettre absolument item suivi du numéro du bouton comme id c'est vraiment important pour l'animation Évitez cependant d'avoir trop de boutons il faudrait alors agrandir le div menu pour éviter que les boutons ne se chevauchent Passons maintenant au CSS Il est utile d'avoir un menu accessible pour les gens qui désactivent le Javascript et croyez-moi ils sont nombreux Le menu ne doit pas être animé en CSS mais il doit tout de même être utilisable d'o? l'utilisation de la liste menu width px background-color FFFF border px solid ? ? ? ? ? menu h Ccolor EE text-align center font-size px menu li list-style-type none list-style-position inside centre height px width px margin auto border px solid BBBBBB Voilà maintenant quelques précisions j'ai mis les border pour permettre