Concepts de menu, CSS Responsive-Tricks
Ce qui suit est un poste invité par Tim Pietrusky. Je sais que Tim de son travail prolifique sur CodePen et d'être membre de la communauté utile là-bas. Il m'a écrit ce poste client sur les menus sensibles que je suis heureux de partager avec vous ci-dessous. Non seulement est-il un concept en temps opportun, mais l'un des concepts améliore une astuce CSS intelligent que nous avons couvert ici dans le passé.
En ce qui concerne la conception réactive nous sommes confrontés à diverses techniques sur la façon de gérer mieux modifier nos menus de navigation pour les petits écrans. Les ressources semblent infinies. Voilà pourquoi je vais vous montrer quatre principaux concepts et discuter des avantages et des inconvénients de chacun d'eux.
Avant de commencer
Dans le code présenté dans cet article, je n'utilise pas fournisseur-préfixes CSS pour garder le plus facile à voir et à comprendre. Les exemples CSS plus complexes utilisent SCSS. Chaque exemple est hébergé sur CodePen où vous pouvez voir le CSS compilé si vous le souhaitez.
Tous les concepts de menu dans cet article sont basés sur cette structure HTML simple que j'appelle le menu de base. L'attribut de rôle est utilisé pour spécifier le concept particulier (full-horizontal, sélectionnez,-menu déroulant personnalisé et hors toile).
Pour répondre à de petits écrans que j'utilise la même requête multimédia sur tous les concepts.
1. La pleine horizontale
Telle est l'approche la plus simple parce que vous avez juste besoin de faire les éléments de la liste largeur sur les petits écrans.
C'est à quoi il ressemble sur un petit écran avec un style personnalisé.
avantages
Désavantages
- Réserves trop écran espace
Ce concept se cache le menu de base sur les petits écrans et affiche un menu de sélection à la place.
Nous cachons la sélection sur de grands écrans.
Sur les petits écrans, on cache le menu de base et de montrer la sélection. Pour aider l'utilisateur à reconnaître que c'est un menu que nous ajoutons aussi un pseudo-élément avec le texte « Menu ».
C'est à quoi il ressemble sur un petit écran avec un style personnalisé.
avantages
- N'a pas besoin d'espace
- Utilise les contrôles natifs
Désavantages
3. personnalisée Dropdown
Ce concept se cache le menu de base sur les petits écrans et montre une entrée étiquette (utiliser la case Hack) à la place. Lorsque l'utilisateur clique sur l'étiquette, le menu de base est affichée en dessous.
Problème avec le Hack Checkbox
Il y a deux problèmes avec la valeur par défaut Hack Checkbox:
avantages
Désavantages
- Bad sémantique (entrée / étiquette)
- HTML supplémentaire
4. Toile Off
Ce concept se cache le menu de base sur les petits écrans et montre une entrée HTML l'étiquette (pour utiliser Advanced Hack Case à cocher, voir 3. Liste déroulante personnalisée pour plus d'infos) à la place. Lorsque l'utilisateur clique sur l'étiquette, le menu de base va à partir de la gauche et le contenu se déplace vers la droite - l'écran se divise: le menu
80% et contenu
20% (en fonction des unités de définition et CSS).
Sur les grands écrans, on cache l'étiquette.
Sur les petits écrans, on cache le menu de base en dehors de la fenêtre et lui montrer l'étiquette / entrée. Pour masquer le menu nous spécifions une largeur (menu_width de $) et ajouter une position négative. Pour aider l'utilisateur à reconnaître que c'est un menu que nous ajoutons aussi un pseudo-élément avec le texte « ≡ » (converti en « \ 2261 » pour l'utiliser comme contenu sur le pseudo-élément) sur l'étiquette.
Lorsque l'utilisateur clique sur l'entrée, le menu de base va à partir de la gauche et le contenu se déplace vers la droite.
C'est ce que le menu ressemble sur un petit écran avec un style personnalisé.
avantages
Désavantages
- Bad sémantique (entrée / étiquette)
- HTML supplémentaire
- Position absolue du corps = Impression position fixe
Est-ce que ça marche sur IE?
Toutes les techniques utilisées ci-dessus ont un objectif: créer des menus adaptés pour les navigateurs modernes! Et parce qu'il n'y a pas d'IE 8 ou moins sur un appareil mobile, nous ne devons pas inquiéter.
Partager:
Pour moi, la meilleure solution est encore une combinaison entre 1 et 3, ou vous pouvez même faire 1 et 4. Ce qui signifie que vous avez un menu qui est visible en haut (ou en bas) de la page par défaut et le transformer en un des les autres solutions lorsque la page se charge avec JS. Ensuite, vous pouvez utiliser des événements JS pour déclencheurs et ne dépendent pas de la case à cocher hack, qui semble juste que ... un hack. Merci pour le post!