Menu révéler par la page Animation

Les méthodes de conception du menu du site Web sont diverses. Certains menus sont toujours visibles et toutes les options sont affichées directement; D'autres sont cachés et doivent être cliqués pour se développer. La façon dont les menus cachés sont étendus est différent: certains glissent et couvrent le contenu, certains repoussent le contenu et certains utilisent un affichage plein écran.

Chaque méthode présente ses avantages et ses inconvénients, et le meilleur choix dépend du scénario d'application spécifique. Je préfère personnellement le menu coulissant, et certainement toutes les situations ne s'appliquent pas. Mais si un menu d'économie d'espace et facile à accès est nécessaire, le menu coulissant est difficile à dépasser.

Cependant, les menus coulissants entrent souvent en conflit avec le contenu de la page. Il bloquera au moins le contenu et, au pire, il supprimera complètement le contenu de l'interface utilisateur.

J'ai essayé une approche différente qui combine la durabilité et la convivialité d'un menu d'emplacement fixe, ainsi que le menu couché caché d'économie d'espace sans retirer l'utilisateur du contenu actuel.

Voici ma méthode d'implémentation.

Interrupteur

Nous construisons un menu avec deux états (sur et fermer) et nous bascuons entre les deux. C'est là que l'astuce à cocher entre en jeu. Il est parfait car la case à cocher a deux états interactifs communs - modifiés et incontrôlés (et états incertains) - qui peuvent être utilisés pour déclencher ces états.

La case à cocher est cachée sous l'icône de menu et est positionnée à l'aide de CSS, il ne peut donc pas être vu même si l'utilisateur interagit avec lui. La sélection de la case à cocher (ou, ahem , icône de menu) affichera le menu. Décochez-le le cache. C'est aussi simple que cela. Nous n'avons même pas besoin de JavaScript pour faire le travail!

Bien sûr, les astuces de case à cocher ne sont pas le seul moyen, et si vous souhaitez changer de classes en utilisant JavaScript pour ouvrir et fermer les menus, c'est totalement OK.

Surtout, la case à cocher doit être en avance sur le contenu principal du code source, car nous allons éventuellement écrire le sélecteur :checked qui nécessite le sélecteur de frère. Si cela provoque des problèmes de mise en page, utilisez la grille ou le flexible pour les dispositions, car ils n'ont rien à voir avec l'ordre du code source, comme la façon dont je peux profiter de ses avantages pour le comptage CSS.

Utilisez appearance pour supprimer le style par défaut de la case à cocher (ajouté par le navigateur), puis ajoutez un pseudo-élément avec une icône de menu afin que l'utilisateur ne puisse pas voir les blocs de case à cocher.

Tout d'abord, les balises de base:

<input type="checkbox" id="menu-toggle">
<div id="page">
  
</div>
<div id="menu">
  
</div>

Et CSS de base pour les astuces et les icônes de menu à cocher:

 / * Masquer la case à cocher et réinitialiser le style * /
entrée [type = "Checkbox"] {
  Apparence: initiale; / * Supprimer la boîte * /
  bordure: 0; marge: 0; Aperçu: aucun; / * Supprimer les marges, les frontières et les contours par défaut * / /
  Largeur: 30px; hauteur: 30px; / * Définir la taille de l'icône du menu * /
  Z-Index: 1; / * Assurez-vous qu'il est en haut * /
}

/ * Icône de menu * /
entrée :: après {
  Contenu: "\ 2255";
  Affichage: bloc;
  Police: 25pt / 30px "Géorgie";
  Texte-indent: 10px;
  Largeur: 100%; hauteur: 100%;
}

/ * Page Content Container * /
#Page {
  Contexte: URL ("Earbuds.jpg") #ebebeb Center / Cover;
  Largeur: 100%; hauteur: 100%;
}

J'ai également ajouté le style de contenu #page , qui sera une image d'arrière-plan pleine grandeur.

Effet de transition

Deux choses se produisent lorsque vous cliquez sur un contrôle de menu. Tout d'abord, l'icône de menu est modifiée en marque "×", indiquant que vous pouvez cliquer dessus pour fermer le menu. Par conséquent, lorsque l'entrée est dans l'état :checked , nous sélectionnons le ::after le pseudo-élément entré dans la case à cocher:

 Entrée: vérifié :: après {
  Contenu: "\ 00d7"; / * Passer à "×" tag * /
  Couleur: #EBEBEB;
}

Deuxièmement, le contenu principal (notre image "casque") est converti pour afficher le menu ci-dessous. Il se déplace à droite, tourne et se rétrécit, et son coin gauche devient un angle. C'est pour donner l'impression que le contenu est repoussé, comme une porte ouverte.

 Entrée: vérifié ~ #Page {
  Path de clip: polygone (0 8%, 100% 0, 100% 100%, 0 92%);
  Transforme: tradlatex (40%) rotatey (10deg) échelle (0,8);
  Transform-Origin: centre droit;
  Transition: Tous .3s linéaire;
}

J'utilise clip-path pour changer l'angle de l'image.

Étant donné que nous appliquons des transitions à la transformation, #page nécessite une valeur initiale clip-path afin qu'il y ait quelque chose pour faire la transition. Nous ajouterons également une transition sur #page car elle lui permettra de se fermer en douceur à mesure qu'il s'ouvre.

 #Page {
  Contexte: URL ("Earbuds.jpeg") #ebebeb Center / Cover;
  Path de clip: polygone (0 0, 100% 0, 100% 100%, 0 100%);
  Transition: Tous .3s linéaire;
  Largeur: 100%; hauteur: 100%;
}

Nous avons essentiellement terminé la conception et le code de base. Lorsque la case n'est pas cochée (en cliquant sur la marque "×"), la conversion sur l'image du casque sera automatiquement annulée et elle sera ramenée à la position centrale.

Un petit javascript

Même si nous avons déjà ce que nous voulons, il y a encore une chose pour améliorer l'expérience utilisateur: fermez le menu lorsque vous cliquez sur (ou cliquez sur) l'élément #page . De cette façon, l'utilisateur peut renvoyer le contenu sans chercher ou même utiliser la balise "×".

Étant donné que ce n'est qu'une autre façon de masquer le menu, nous pouvons utiliser JavaScript. Et si JavaScript est désactivé pour une raison quelconque? Cela n'a pas d'importance. C'est juste une amélioration qui n'empêchera pas le menu de fonctionner sans lui.

 Document.QuerySelector ("# page"). AddEventListener ('click', (e, checkbox = document.QuerySelect
  if (checkbox.checked) {checkbox.checked = false; e.stoppropagation (); }
});

Le but de ces trois lignes de code est d'ajouter un gestionnaire d'événements de clic à #page . Si la case à cocher est dans l'état :checked , décochez la case à cocher pour fermer le menu.

Nous avons consulté les démos conçues pour des conceptions verticales / verticales, mais cela fonctionne aussi bien à grande taille d'écran en fonction de ce que nous utilisons.

Ce n'est qu'une manière ou d'essayer un menu glissant typique. L'animation ouvre de nombreuses possibilités, et vous pouvez également avoir des dizaines d'autres idées. En fait, j'aimerais les entendre (ou mieux encore, voir), alors partagez!

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!