Le motif hors toile est une approche classique de la navigation réactive. Lorsque la fenêtre d'affichage est suffisamment petite pour la justifier, la navigation volumineuse est masquée «en mode masqué» et n'est visible que lorsqu'elle est basculée..
Aujourd’hui, nous allons créer une navigation hors de la toile, en utilisant CSS pour effectuer le basculement (aucun JavaScript n'est requis) et notre bon ami Grid pour former la structure de la page. Voici la démo complète de la page sur laquelle nous travaillons.
Structure de base de la page
Commençons par construire une page de base; nous visons quelque chose comme ceci:
Structure de page sémantique
Ceci est une structure de page sémantique assez typique; vous verrez que tout reste dans une seule colonne pour les petites fenêtres, puis que le côté se déplace sur des écrans plus grands. le l'élément est surligné en bleu pour plus de clarté.
Voici notre balisage:
Entête
Article
Curabitur orci lacus, Auctor ut facilisis nca, Ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Les mécènes placent elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu dans vehicula véhicula. Donec varius justo chez nulla aliquet volutpat.
Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nca bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies concordent. Aenean sed efficitur orci. Nulla vel tempus mi.
Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu ultricies eu augue, au rhoncus mi faucibus. Dans et tellus vitae leo scelerisque fringilla nca à nunc.
Ajoutons maintenant quelques styles visuels et certaines règles de la grille.
Gettin 'Griddy avec elle
Commencez par envelopper tous nos éléments structurels dans un élément contenant, ce sera notre conteneur Grid. j'utilise .
Ajoutez maintenant quelques styles de grille de base:
.conteneur display: grid; grid-template-columns: 1fr; intervalle de grille: 10 px;
Ici, nous déclarons que le conteneur doit être affichage: grille;, qu'il devrait avoir une seule colonne d'une unité fractionnaire (ce qui n'est pas absolument nécessaire à ce stade, mais nous l'avons ajouté pour être exhaustif), et que l'écart entre tous les éléments de la grille doit être de 10 pixels.
Ajoutez ensuite quelques styles visuels pour rendre les choses un peu plus claires:
.conteneur> * color: # 353535; taille de police: 1.2em; hauteur de ligne: 1,5; rembourrage: 20px; arrière-plan: # d0cfc5; .container nav background: # 136fd2; nav ul list-style: none; marge: 0; rembourrage: 0; nav a color: # d0cfc5 nav a: hover text-decoration: none;
Rendez-le réactif
Ajoutons une requête multimédia afin que la disposition change lorsque la fenêtre atteint une certaine taille (passons à 600 pixels).
Alors maintenant, sur des écrans plus grands, la déclaration de la grille passe à Grille-modèle-colonnes: répéter (4, 1fr);. Cela nous donne quatre colonnes d'égale largeur, nous devons donc déclarer à quelle largeur nous voulons chacun de nos éléments structurels. le entête, nav, et bas de page couvriront tous 4 (traverser quatre colonnes) tandis que le section couvrira seulement trois, laissant un espace d’une colonne pour le de côté à remplir automatiquement.
Enfin, quelques styles pour modifier l'apparence du nav:
/ * styles de navigation * / nav ul li display: inline-block; remplissage: 0 20px 0 0;
Voici ce que nous avons jusqu'à présent:
S'aventurer hors-toile
C’est un exemple parfait de la façon dont le positionnement CSS peut encore fonctionner sur des éléments structurels, même au sein d’une grille déclarée. Nous allons saisir notre navigation, la supprimer du flux de documents et la placer hors de la zone de travail. Les autres éléments de la grille se mettront bien en place.
Commencez par une autre requête multimédia. Nous avons déjà notre largeur min requête, mais cette fois, nous voulons seulement styler les éléments jusqu’à largeur maximale. Jusqu'à ce que notre fenêtre atteigne cette magie de 600 pixels, nous souhaitons que le nav soit positionné hors de la toile:
@media only screen et (max-width: 599px) #nav position: fixed; / * ou choisissez 'absolu' en fonction du comportement souhaité * / top: 0; en bas: 0; largeur: 300px; à gauche: -340px; transition: transformer .3s easy-in-out;
Nous avons donné au nav une largeur fixe, en le plaçant suffisamment à gauche pour le cacher complètement.
Nous avons utilisé la position fixé, mais vous pouvez aussi utiliser absolu ici, selon que vous voulez que le nav défile ou non avec la fenêtre.
Vous remarquerez également le transition règle, qui prendra effet une fois que nous aurons construit des commandes à bascule. Nous allons repasser le panneau de navigation en utilisant transformer. Merci à Rachel Nabors et Joe Zimmerman de me rappeler que l’utilisation de transformer est toujours plus performant pour l'animation que position!
Bascule
Après avoir fait disparaître notre navigation, nous avons maintenant besoin de contrôles pour le ramener en cas de besoin. Ajoutons un lien pour le déclencher et un lien pour le refermer.
Ajoutez ceci à l'en-tête:
ouvrir
et ceci au nav:
Fermer
Nous n'avons pas besoin que le lien ouvert soit visible sur des écrans plus grands. Nous allons donc masquer les éléments .toggle dans notre requête multimédia min-width:
.bascule display: none;
:cible
L’important dans les liens ci-dessus est la présence d’un «identifiant de fragment» (le #nav dans le href). Les navigateurs utilisent ces identifiants pour naviguer directement vers des éléments spécifiques d'une page. Dans ce cas, nous ciblons l’élément qui correspond à l’identité «nav», et une fois ciblé, nous pouvons l’appeler à l’aide de la commande :cible pseudo classe. Pas de JavaScript nécessaire!
Remarque: en utilisant un identifiant de fragment de cette manière, une entrée sera ajoutée à l'historique du navigateur chaque fois que l'utilisateur clique dessus. Ce n'est peut-être pas le résultat recherché par vos utilisateurs! Merci à Joe Zimmerman pour l'avoir signalé.
Ajoutez les éléments suivants à notre requête multimédia sur la largeur maximale:
#nav: target transform: translateX (340px);
C'est tout! C'est notre bascule.
Voici ce que nous avons maintenant:
Vous aurez besoin de jeter un coup d'œil à la démo de la page complète pour apprécier pleinement son travail..
Conclusion
Et nous avons fini! J'ai minimisé le style pour ne pas gêner, mais n'hésitez pas à devenir fou et à faire ce que vous voulez..
Vous pouvez également préférer une bascule JavaScript au lieu de la :cible, dans ce cas, vous avez toutes les pièces en place pour faire ce travail aussi.
J'espère que vous avez apprécié ce petit exercice de grille, restez à l'écoute pour en savoir plus!
Ressources utiles
Comprendre la série CSS Grid Layout sur Tuts+
Examen de la navigation réactive: modèles hors toile de Steven Bradley
Abonnez-vous à csslayout.news
Animations de haute performance de Paul Lewis et Paul Irish
Accentsconagua
Share
Structure de page sémantique
