Ne soyez pas un carré, sortez de votre boîte ennuyeuse et essayez un cercle de taille. Aujourd'hui, nous allons créer un menu de navigation circulaire qui tourne en différents points lorsque l'utilisateur survole une ancre.
En cours de route, nous devrons surmonter plusieurs obstacles, tels que la structuration de notre code HTML afin de permettre un vol stationnaire à distance et le positionnement correct de tous les éléments afin que tout fonctionne correctement. C'est un défi amusant et il y a beaucoup à apprendre, commençons!
Lancer la démo - Télécharger des fichiers
Étape 1: HTML structurel
Avant d'écrire un seul caractère HTML, nous devons déterminer la structure de ce que nous construisons. Pour cela, nous pouvons nous tourner vers Photoshop et faire un croquis de base de la façon dont nous voulons que le menu ressemble. Voici ce que je suis venu avec:
Fondamentalement, chacun des rectangles du haut est lié à l'un des quatre petits cercles à l'intérieur du grand cercle. Quand un rectangle est survolé, son petit cercle correspondant tournera vers le haut du menu. Encore une fois, nous utilisons le concept de? Télécommande? survolez, car l'utilisateur interagit avec un domaine et cela en affecte un autre.
Chaque fois que j'essaie de lancer un vol stationnaire à distance, il me faut quelques essais pour que la structure soit parfaite. Cela est dû au fonctionnement des sélecteurs CSS, et plus précisément à celui de la pseudo-classe de survol. Considérer ce qui suit:
Disons que nous avons mis cette structure en place avec l'idée que nous voulions survoler l'ancre pour changer la couleur du paragraphe. Si vous avez une idée de base du fonctionnement des survols distants, vous pouvez créer des CSS comme ceci:
En fin de compte, cela ne fonctionne tout simplement pas. Dans notre sélecteur CSS, nous devons lier l'ancre qui est planée au paragraphe à traiter, mais nos éléments sont dans deux divs complètement séparés. Il n'y a pas de moyen facile de grimper aussi loin et à travers l'arbre DOM.
Alors que faisons-nous? La réponse réside dans la restructuration de notre code HTML. Cette fois, nous allons jeter les deux éléments au même niveau de l’arbre.
Maintenant, notre paragraphe est un frère de notre ancre, ce qui signifie que nous avons un moyen clair de les lier ensemble dans notre CSS. Voici comment ça fonctionne:
Cette fois-ci, nous demandons au navigateur de déclencher un changement de couleur sur tout paragraphe qui est le frère immédiat d'une ancre survolée.
Application
Si nous appliquons ces connaissances à notre scénario, nous pouvons créer une structure qui fonctionne. Commencez par créer trois divs: wrapper, menu et circle. Nid menu à l'intérieur de emballage et cercle à l'intérieur de menu.
À l'intérieur du menu div, placez quatre ancres, chacune avec une classe unique. À l’intérieur du cercle div, placez une liste non ordonnée contenant les nombres de un à quatre.
Il est peut-être encore un peu déroutant de voir comment toutes ces pièces se rapportent à notre dessin précédent. Mettons-le à jour avec quelques repères visuels pour vous donner une idée de ce que tout fait.
Étape 2: CSS wrapper
Le code ci-dessus représente tout le code HTML dont nous aurons besoin pour ce petit projet. Le reste de notre travail est tout CSS. Pour commencer, établissons un code de base de renvoi et de positionnement:
Il n'y a pas grand chose à confondre ici, nous esquissons simplement notre enveloppe. Notez que le -webkit-backface-visibilité bit est d’empêcher un bogue qui fait clignoter Webkit lors des transitions CSS.
Étape 3: entourez CSS
Nous passerons ensuite à la codification de ce grand cercle. Faire un cercle en CSS est assez facile, assurez-vous que la hauteur et la largeur sont égales et que le rayon de la bordure est défini sur au moins 50%. Tout le reste ici aide simplement à bien positionner tout.
Pour que le cercle ait l’air un peu plus sophistiqué, ajoutons une ombre incrustée. Enfin, nous ajoutons une transition afin que le cercle anime la rotation ultérieure.
Si nous jetons un coup d’œil à notre aperçu en direct, nous devrions avoir un beau grand cercle et quelques autres éléments épars que nous aborderons ensuite.
Étape 4: Menu CSS
Pour notre prochaine astuce, nous allons styliser les éléments de menu. Pour ce faire, ciblez les ancres, ajoutez des marges et du rembourrage, définissez la largeur et la couleur, supprimez la décoration du texte et appliquez un style à la police. Puis ciblez le survol et ajoutez une couleur de fond. Voici le code:
Maintenant, si nous consultons notre aperçu en direct, les liens de notre menu seront beaucoup plus agréables. Les éléments de la liste ne sont pas encore complètement maîtrisés, nous allons donc les attaquer.
Étape 5: CSS petit cercle
Pour créer les petits cercles, nous ciblons d’abord les éléments de la liste et les configurons d’une manière très similaire au grand cercle: réglez la hauteur et la largeur sur un même seuil et définissez le rayon de la bordure sur 50%. Veillez également à supprimer les points, à définir l’arrière-plan en blanc et à styler la police comme indiqué ci-dessous.
Voici la partie la plus délicate. Ci-dessus, nous avons donné à chacun des cercles un positionnement absolu, nous devons donc maintenant les mettre en place. Nous pouvons cibler chaque cercle avec nième enfantpuis utiliser Haut et la gauche pour les pousser où on veut. Enfin, nous voulons faire en sorte que le haut de chaque numéro soit dirigé vers le bord extérieur du grand cercle, de sorte que lorsque tout l’élément tourne, le nombre en haut soit toujours à l’envers. Nous faisons cela en utilisant une transformation CSS.
Si nous jetons un coup d'oeil à notre aperçu maintenant, tout est très bien Mais il y a une chose qui ne va pas?
Étape 6: Inner Circle CSS
Notre concept initial ne consistait pas en un seul grand cercle, il existait également un cercle intérieur centré. Nous pouvons y arriver sans aucune balise HTML supplémentaire en utilisant notre vieil ami avant. Créer un élément avant emballage, définissez le contenu sur "DS", créez un cercle comme les autres (130 pixels cette fois), alignez et stylisez le texte, déplacez-le vers le haut avec z-index et positionnez-le avec un positionnement absolu.
Cela a l'air beaucoup mieux! Avec cela, notre style visuel est complètement terminé. Maintenant, tout ce qui reste à faire est de donner vie à cette ventouse.
Étape 7: Hover Circle CSS
Pour faire tourner notre menu, nous devons utiliser notre astuce de survol distant associée à une transformation CSS. Lorsque l'utilisateur passe la souris sur l'un des éléments de menu supérieurs, l'élément cercle entier tourne afin que le nombre correspondant soit placé en haut.
La partie la plus délicate de cette tâche consiste à déterminer le sélecteur. Nous commençons au plus haut niveau qui contient à la fois le cercle div et les éléments de menu. C'est bien sûr le menu div. Ensuite, nous limitons nos options à un enfant spécifique du menu et le ciblons en survol. Enfin, nous disons au navigateur que nous voulons agir tout frère de cet élément étant survolé avec une classe de? cercle.? Voici à quoi cela ressemble dans la pratique:
C'est une bête de choix, mais il fait le travail et est assez bon pour notre petite expérience amusante. Maintenant, puisque nous visons le deuxième cercle ici, nous devons faire pivoter la division entière de 90 degrés. De plus, puisque nous voulons aller dans le sens contraire des aiguilles d'une montre, le nombre sera négatif:
C'est tout ce qu'il y a à faire, maintenant nous utilisons simplement cette technique dans les quatre cercles. Nous commençons avec une rotation de 0, puis -90, -180 et enfin -270.
Regarde!
Félicitations, vous avez terminé! Il est maintenant temps de vérifier les fruits de notre dur labeur. Voici une démo.
Démo: Cliquez ici pour lancer.
Comme toujours, merci beaucoup pour la lecture et n'hésitez pas à laisser un commentaire ci-dessous pour me dire ce que vous pensez. Vous pouvez aborder ce projet de différentes manières. Comment l'auriez-vous fait différemment?