Navigation de menu fantaisie à l'aide du positionnement de l'ancrage

Je crois que vous avez entendu parler de la fonction de positionnement du point d'ancrage CSS, non? Cette fonctionnalité vous permet de lier n'importe quel élément de la page à un autre élément, le point d'ancrage. Il est très utile pour toutes les infractions, mais il crée également de nombreux autres bons résultats.

Cet article étudiera la navigation au menu, et je compte sur le positionnement de l'ancrage pour créer d'excellents effets de survol sur les liens.

C'est cool, non? Nous avons un effet glissant, le rectangle bleu s'adapte parfaitement au contenu du texte par une transition en douceur. Si vous n'êtes pas familier avec le positionnement de l'ancrage, cet exemple est parfait pour vous car il est simple et vous donnera les bases de cette nouvelle fonctionnalité. Nous apprendrons un autre exemple, alors restez à la fin!

Notez qu'à ce jour, seuls les navigateurs à base de chrome prennent entièrement le positionnement de l'ancrage. Avant que les autres navigateurs puissent prendre en charge cette fonctionnalité plus largement, vous devez afficher la démo dans les navigateurs comme Chrome ou Edge.

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bhttp s: //www.php.cn/link/93AC0C50D620DC7B88E5FE05C70E15 / link / 93AC0C50DD620DC7B88E5FE05C70E15B Configuration initiale

Commençons par la structure HTML, qui n'est qu'un élément NAV contenant une liste de liens non ordonnée:

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

Nous ne passerons pas beaucoup de temps à expliquer cette structure, car elle peut également être différente si vos cas d'utilisation sont différents. Assurez-vous simplement que la sémantique est liée à ce que vous essayez de faire. Quant à la section CSS, nous commencerons avec quelques styles de base pour créer une navigation de menu horizontale.

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

Jusqu'à présent, rien de spécial. Nous avons supprimé certains styles par défaut et utilisé Flexbox pour aligner les éléments horizontalement.

Effet coulissant

Tout d'abord, comprenons comment fonctionne l'effet. À première vue, il semble que nous ayons un rectangle qui se rétrécit à une très petite hauteur, se déplace vers un élément de volants, puis atteint une hauteur. C'est l'effet visuel, mais en réalité, plusieurs éléments sont impliqués!

C'est ma première démonstration, et j'utilise différentes couleurs pour mieux comprendre ce qui se passe.

Chaque élément de menu a son propre "élément" qui peut rétrécir ou se développer. Ensuite, nous avons un "élément" commun (celui en rouge) qui glisse entre différents éléments de menu. Le premier effet est fait en utilisant l'animation d'arrière-plan, et le deuxième effet est l'endroit où le positionnement du point d'ancrage entre en jeu!

Animation d'arrière-plan

Pour la première partie, nous animerons la hauteur du gradient CSS:

/* 1 */
ul li {
  background: 
    conic-gradient(lightblue 0 0)
    bottom/100% 0% no-repeat;
  transition: .2s;
}

/* 2 */
ul li:is(:hover,.active) {
  background-size: 100% 100%;
  transition: .2s .2s;
}

/* 3 */
ul:has(li:hover) li.active:not(:hover) {
  background-size: 100% 0%;
  transition: .2s;
}

Nous définissons un dégradé avec une largeur de 100% et une hauteur de 0% en bas. La syntaxe de gradient peut être bizarre, mais c'est la syntaxe la plus courte qui me permet d'avoir un gradient monochrome.

lié: "Comment définir correctement le gradient monochrome"

Ensuite, si l'élément de menu est plané ou a une classe .cactive, nous définissons la hauteur à 100%. Veuillez noter l'utilisation des retards ici pour vous assurer que la croissance se produit après le retrait.

Enfin, nous devons faire face à des cas spéciaux d'articles. Si nous planons un élément (et non l'élément actif), l'élément .active obtiendra un effet rétrécissant (la hauteur du gradient est égale à 0%). C'est ce que fait le troisième sélecteur du code.

Notre première animation est terminée! Notez comment la croissance commence une fois la contraction terminée en raison du retard que nous avons défini dans le deuxième sélecteur. ANCHOR POSITIONNEMENT ANIMENTATION

La première animation est très facile car chaque projet a sa propre animation d'arrière-plan, ce qui signifie que nous n'avons pas à nous soucier du contenu texte, car l'arrière-plan remplit automatiquement l'espace entier.

Nous utiliserons un élément pour effectuer une deuxième animation qui glisse entre tous les éléments de menu tout en ajustant sa largeur pour s'adapter au texte de chaque élément. C'est là que le positionnement de l'ancrage peut nous aider.

Commençons par le code suivant:

Pour éviter d'ajouter des éléments supplémentaires, je préfère utiliser des pseudo-éléments sur UL. Il devrait être absolument positionné et nous compterons sur deux propriétés pour activer le positionnement de l'ancrage.

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

Nous utilisons l'attribut de nom d'ancrage pour définir le point d'ancrage. Lorsqu'un élément de menu est survolé ou a une classe .cactive, elle devient un élément d'ancrage. Si un autre élément oscille, nous devons également supprimer le point d'ancrage de l'élément .cactif (donc, le dernier sélecteur du code). En d'autres termes, un seul point d'ancrage est défini à la fois.

Ensuite, nous utilisons l'attribut de position de position pour lier le pseudo-élément au point d'ancrage. Notez comment les deux utilisent la même notation - li. Ceci est similaire, par exemple, à la façon dont nous définissons @keyframes avec un nom spécifique, puis l'utilisons dans la propriété d'animation. N'oubliez pas que vous devez utiliser la syntaxe

, ce qui signifie que le nom doit toujours commencer par deux tirets (-).

Le pseudo-élément est correctement placé, mais rien n'est vu parce que nous ne définissons aucune dimension! Ajoutons le code suivant:

L'attribut de hauteur

est simple, mais Anchor () est un nouveau membre. Voici ce que Juan Diego le décrit dans Almanac:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

La fonction

CSS Anchor () prend un côté de l'élément d'ancrage et l'analyse dans son

positionné. Il ne peut être utilisé que pour les propriétés en ligne (comme le haut, le bas, le bas, la gauche, la droite, etc.), et est généralement utilisé pour placer des éléments absolument positionnés par rapport au point d'ancrage.

Vérifions également la page MDN:

anchor () La fonction CSS peut être utilisée dans la valeur d'attribut intégrée de l'élément de positionnement de l'ancrage, renvoyant la valeur de longueur relative à sa position de bord d'élément d'ancrage associée.

Habituellement, nous utilisons à gauche: 0 pour placer l'élément absolu sur le bord gauche de son bloc contenant (c'est-à-dire l'ancêtre le plus proche avec position: relative). À gauche: l'ancre (à gauche) fera de même, mais il prendra en compte l'élément d'ancrage associé au lieu de contenir des blocs.

c'est tout - nous avons fini! Survolez les éléments du menu dans la démo ci-dessous pour voir comment les pseudo-éléments glissent entre eux.

Chaque fois que vous survolez votre souris sur un élément de menu, il devient une nouvelle ancre pour le pseudo-élément (UL: avant). Cela signifie également que la valeur de l'ancre (...) changera, ce qui entraînera un effet coulissant! N'oublions pas d'utiliser la transition ou nous aurons un changement soudain.

Nous pouvons également écrire du code comme ceci:

<nav><ul>
<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Home</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">About</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Projects</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Blog</a></li>
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Contact</a></li>
  </ul></nav>

En d'autres termes, au lieu d'utiliser des propriétés physiques telles que la gauche, la droite et le bas, nous pouvons compter sur l'abréviation de l'encart, et au lieu de définir la position de position, nous pouvons inclure le nom de l'ancrage dans la fonction Anchor (). Nous avons répété le même nom trois fois ici, ce qui n'est peut-être pas la meilleure option, mais dans certains cas, vous voudrez peut-être que votre élément envisage plusieurs ancres, auquel cas cette syntaxe aura un sens.

combinant deux effets

Maintenant, nous combinons les deux effets, void , l'hallucination est parfaite!

Veuillez noter la valeur de transition, où le retard est important:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  gap: .5rem;
  font-size: 2.2rem;
}

ul li a {
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
  text-decoration: none;
  font-weight: 900;
  line-height: 1.5;
  padding-inline: .2em;
  display: block;
}

Nous avons une série de trois animations - réduisez la hauteur du gradient, faites glisser les pseudo-éléments et augmenter la hauteur du gradient - nous devons donc fixer un retard entre eux pour tout rassembler. C'est pourquoi pour les diapositives de pseudo-éléments, nous avons un retard égal à une durée d'animation (transition: .2.2s), tandis que pour la partie de croissance, le retard équivaut à deux fois la durée (transition: .2s.4s).

Effet de rebond? pourquoi pas? !

Essayons une autre animation étrange où le rectangle mis en évidence se déforme en petit cercle, saute vers l'élément suivant, puis se déforme à nouveau dans le rectangle!

Je n'expliquerai pas trop cet exemple, car ce sont vos devoirs pour analyser le code! Je vais fournir quelques conseils pour que vous puissiez déballer ce qui se passe.

Comme avec l'effet précédent, nous avons combiné deux animations. Pour le premier, j'utiliserai les pseudo-éléments de chaque élément de menu, je redimensionnerai et Border-Radius pour simuler la déformation. Pour la deuxième animation, je vais créer un petit cercle en utilisant le pseudo-élément ul, que je déplace entre les éléments de menu.

Il s'agit d'une autre version de la démo, différentes couleurs et des transitions plus lentes pour mieux visualiser chaque animation:

La partie délicate est l'effet de saut, j'ai utilisé un bizarre cubique-Bezier (), mais j'ai un article détaillé expliquant cette technique dans mon article de CSS-Tricks "Advanced CSS Animation Using Cumbic-Bezier ()".

Conclusion

J'espère que vous avez apprécié cette petite expérience en utilisant la fonction de positionnement de l'ancrage. Nous n'avons examiné que trois propriétés / valeurs, mais cela suffit pour vous préparer à utiliser cette nouvelle fonctionnalité. Les attributs de nom d'ancrage et de position de position sont des pièces obligatoires qui relient un élément (généralement appelé élément "cible" dans ce contexte) à un autre élément (nous appelons l'élément "ancre" dans ce contexte). De là, vous pouvez utiliser la fonction Anchor () pour contrôler la position.

lié: Guide de points de points d'ancrage CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!