Bonjour amis, collègues ! Comment allez-vous? J'espère que tout le monde va bien :) Aujourd'hui, nous allons créer un menu adaptatif simple pour notre page de destination. Les gens me posent de plus en plus souvent des questions à ce sujet, j'écris ces questions et j'essaie de répondre à ces questions. temps libre rédiger des articles sur ces sujets.

Merci de m'avoir ainsi donné de nouvelles idées et d'avoir contribué au développement du blog. Au fait, sur quel sujet aimeriez-vous lire le prochain article ? S'il vous plaît écrivez dans les commentaires, c'est très important pour moi. Maintenant, commençons...

Comment créer un menu réactif pour un site Web

Google a confirmé qu'à partir de la mi-avril, la réactivité des sites Web pour les appareils mobiles deviendra l'un des facteurs de classement. À cet égard, tous les documents expliquant comment rendre votre page de destination adaptative sont plus pertinents que jamais. Aujourd'hui je n'expliquerai rien de compliqué, mais au contraire, je vais vous expliquer comment réaliser un menu adaptatif très simple avec un minimum de temps.

Fondamentalement, ce sera html + css, mais vous aurez besoin d'un très petit script pour traiter le clic. Donc…

Menu horizontal réactif

Commençons par le HTML. Tout d'abord, connectons bibliothèque jquery. Vous l'utilisez probablement depuis longtemps, alors assurez-vous de ne pas le connecter une seconde fois :

Maintenant les marquages. Une liste non ordonnée normale et un petit div contenant une icône de menu. Il ne sera visible qu'à basse résolution.

Prix ​​de téléchargement

Contacts

Commentaires

Comme vous pouvez le constater, ce n’est pas compliqué, je pense que vous pouvez l’améliorer vous-même selon vos besoins.
Ajoutons maintenant des styles :

#menu ( arrière-plan : #2ba9c0 ; largeur : 100 % ; remplissage : 10px 0 ; alignement du texte : centre ; ) #menu a ( couleur : #fff ; décoration du texte : aucun ; remplissage : 12px 12px ; ) #menu a : survol ( bordure inférieure : 4px solide #fff ; arrière-plan : #078ecb ; ) .itemsMenu li ( affichage : en ligne ; remplissage droit : 35px ; largeur : 100 % ; marge : 0 auto ; ) .itemsMenu li img ( alignement vertical : milieu; marge droite: 10px; ) .iconMenu ( couleur: #fff; curseur: pointeur; affichage: aucun; ) .showitems ( display:block !important; ) @media screen et (max-width: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ; ) )

Désormais, lorsque vous réduisez la fenêtre du navigateur, vous verrez l'image suivante :

Je n’aimerais vraiment pas décrire chaque ligne, car le blog n’est pas une question de mise en page en tant que telle. Laissez-moi juste essayer de vous expliquer.

Tout d’abord, nous définissons la propriété display:inline sur les éléments li pour les faire apparaître horizontalement les uns à côté des autres. J'aurais pu utiliser float:left, mais j'ai décidé de le faire de cette façon. Et cachez l’icône de menu avec la propriété display:none. Lorsque la résolution de l'écran est inférieure à 600 pixels, supprimez les éléments li en ligne, masquez-les et affichez l'icône. En un mot – oui.

Nous avons maintenant besoin d'un script simple qui traiterait un clic sur l'icône du menu et afficherait ses éléments :

$(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

Comme ça. Je l'ai emmené à fichier séparé et l'a inclus avant la balise body de fermeture.

C'est tout. De cette façon, vous pouvez créer rapidement un menu adaptatif simple pour votre page de destination.

Bien sûr, il y a des inconvénients. Les retraits sont spécifiés en pixels, mais vous pouvez également définir toutes les distances sous forme de pourcentage. Ce n'était tout simplement pas nécessaire. S'il s'agissait d'un site à part entière, j'utiliserais des icônes svg ou de police, pas png, et je recalculerais les retraits en pourcentage. Et donc, c'était un peu impromptu :) J'espère que tout est clair ? Au revoir.

Les extraits de code réactifs fournis dans cet article sont idéaux pour tout type de mise en page. Vous trouverez dans cette liste des menus verticaux et horizontaux pour le site, des menus déroulants et latéraux avec divers effets d'animation. Le responsive design est une technique qui apparaît chaque année. Ces extraits serviront de point de départ aux concepteurs pour de nombreux projets Web.

Menu sombre CSS uniquement par John Erbank

En plus du design, cet extrait définit un menu déroulant réactif. La barre de navigation dans une fenêtre standard occupe la position horizontale habituelle.

Aux points d'arrêt plus petits, le menu remplit tout l'écran. Lorsque vous passez le curseur sur les éléments du menu principal, les éléments de sous-menu avec une couleur plus claire s'affichent à l'écran. Fond gris. Cette solution est idéale pour les sites qui ne comportent pas trop de liens vers des rubriques. De cette façon, ils peuvent être affichés sur la page sous forme de bloc d’éléments.

Voir la démo

Portfolio entièrement réactif par Céline

Cette présentation de portefeuille entièrement réactive comprend une barre de navigation simple mais efficace. Lorsque la fenêtre de visualisation est réduite à un certain point de contrôle, les éléments de menu réactifs du site sont masqués, ne laissant que le bouton bascule de menu à l'écran. L'utilisateur peut cliquer dessus pour développer ou masquer le menu qui se développe sous le titre.

Voir la démo

Barre de navigation Bootstrap par Bobby

Cet extrait de code contient plusieurs points d'arrêt et est installé au-dessus de Bootstrap.

À grandes tailles Les fenêtres de liens de navigation sont positionnées à côté du logo et, sur les points d'arrêt plus petits, elles descendent dans leur propre barre. Lorsque la fenêtre de visualisation devient encore plus petite, les liens sont « masqués » sous le commutateur de menu. Il s'agit d'une méthode courante qui fonctionne dans tous les navigateurs.

Voir la démo

Clean Dropdown Toggle par Boyd Massier

Cette barre de navigation plate et réactive avec des menus déroulants est créée en utilisant du CSS pur. À l'état responsive, la barre de navigation se transforme en un menu flottant dans lequel les liens sont affichés sous forme de bloc. Chaque menu déroulant interne peut également être basculé pour donner accès aux éléments de sous-menu.

Voir la démo

Barre coulissante animée par Antoine Vinial

Ce menu déroulant de site Web est l’un des exemples de navigation les plus uniques. Vous voyez un onglet vert clair qui, lorsque vous cliquez dessus, développe une barre de navigation en haut avec des liens de menu. Chaque lien a une largeur flottante et s'adapte à n'importe quelle taille d'écran.

Sur Pas grands écrans le même effet est utilisé, mais le menu est affiché verticalement au lieu d'horizontalement. faire attention à bel effet animation, qui est contrôlée à l’aide de la classe CSS .active.

Voir la démo

Menu réactif de base par Ash Nelson

À première vue, ce menu semble standard : des liens traditionnels, une bascule de menu hamburger et une palette de couleurs plates. Même s'il manque d'éclat glamour, le menu fonctionne et est facile à utiliser. Tout son code est écrit en Haml et SASS.

Voir la démo

Hamburger Nav à tiroir coulissant par Hanlin Chong

L'émergence des menus coulissants pour les sites Web a donné lieu à de nombreux différends entre concepteurs et développeurs. Certaines personnes pensent que cette implémentation vous permet d'insérer beaucoup de contenu dans le menu sans occuper d'espace utile. D'autres critiquent ce type de menu car les liens sont cachés à la vue de l'utilisateur.

Pour cette raison, les menus coulissants doivent être utilisés avec prudence. Tout d'abord, lorsqu'un site a un grand nombre deéléments de navigation. Et si vous recherchez un modèle de ce type de menu, je vous conseille de faire attention à cet extrait. Il implémente une structure familière à de nombreux utilisateurs.

Voir la démo

Mic Nav sur une seule page par Travis

Dans ce menu, les liens occupent la majeure partie de l'écran et en utilisant modèles d'arrière-plan un effet de matrice est créé. Ce n'est pas tout à fait pratique pour les sites Web classiques, mais cet effet peut être utilisé pour des projets créatifs ou des portfolios Web.

Voir la démo

Menu circulaire Morphing par Sergio

Expérimentons un peu avec cet exemple de menu de site Web. En le regardant, vous pourriez penser qu'il s'agit d'un menu coulissant ordinaire. Mais après avoir cliqué sur l'icône, vous verrez un effet d'affichage de menu animé unique.

Il est peu probable que cette solution trouve une large application dans le domaine commercial. Mais il s’agit néanmoins d’un excellent exemple du large champ de créativité qu’offre le design réactif.

Voir la démo

Nav Flexbox CSS pur par Joe Watkins

Flexbox CSS3 est un terme utilisé par les développeurs pour désigner le modèle de mise en page flexible CSS3. Nous avons déjà publié, que je vous conseille de lire.

Ce menu est construit sur Flexbox, dans lequel les liens sont répartis uniformément dans le panneau, quelle que soit la taille de l'écran. Tout le code est écrit en HTML et CSS purs, la prise en charge des menus déroulants du site est implémentée.

Voir la démo

Bascule animée par Joe Baggaley

Si vous aimez les effets d'animation, vous pouvez utiliser cette solution. Par défaut, les liens sont alignés côte à côte et les sous-menus déroulants sont pris en charge.

Une fois la fenêtre réduite, la barre de navigation disparaît sous le lien bascule. Le menu est converti en un grand bloc, qui est ensuite affiché à l'écran à l'aide d'une animation.

Voir la démo

Menu de navigation flexible par gantit

L'approche la plus pratique consiste à utiliser plusieurs points de contrôle dans une conception réactive. C'est pourquoi j'aime ce système de navigation. Il montre comment une barre de navigation horizontale standard peut passer par de nombreuses phases différentes. Cet extrait offre une flexibilité de personnalisation et peut s'intégrer parfaitement à n'importe quel site Web.

Voir la démo

Onglets CSS purs par Martin Gaidichar

Les onglets sont considérés comme une solution de navigation acceptable, permettant le déplacement entre les pages et le contenu interne. Lorsque la fenêtre est réduite, ils se comportent comme un bloc de navigation normal avec des effets d'animation. Les styles de design peuvent être facilement étendus selon vos goûts.

Voir la démo

Fil d'Ariane CSS pur par Oliver Noblitch

Les fils d'Ariane ne sont pas très populaires parmi les concepteurs et les développeurs, mais ils peuvent être utilisés pour les interfaces de navigation. Ces chapelure implémenté sans effets d'animation, mais écrit en CSS pur.

Voir la démo

Batman Nav par Mighty Shaban

Dans le menu de ce site Web réactif, les liens sont définis sur une mise en page déroulante d'une seule page qui vous permet de naviguer entre les sections. Lors du redimensionnement de la fenêtre, le menu horizontal est converti en un bloc vertical caché derrière l'icône.

Le système de menus est magnifiquement présenté. Cela peut être utile lors du développement d’une mise en page d’une seule page.

Voir la démo

Liste déroulante à plusieurs niveaux par Stephanie Water

Concevoir une navigation à plusieurs niveaux nécessite une planification minutieuse. Non seulement cet extrait est fonctionnel, mais il prend également en charge les effets réactifs via CSS. Lorsque la barre de navigation est réduite, l'utilisateur peut cliquer sur une icône située à côté d'un élément de menu spécifique et afficher un sous-menu masqué. Cette technique permet de garder votre code gérable.

Voir la démo

Application Web de livre électronique CSS pur par Andy Fitzsimon

L'interface du menu a été conçue pour imiter la norme Solutions iOS avec des barres de navigation en haut et parties inférieuresécran. Cet extrait utilisait CSS flexbox, avec lequel les liens menu à plusieurs niveaux les éléments du site et de la page sont redimensionnés proportionnellement pour s'adapter à la taille de la fenêtre du navigateur.

Voir la démo

Navigation à largeur égale par Dorian Kovran

Cette interface contient des blocs de largeur égale de liens de barre de navigation. Chaque lien occupe le même pourcentage de l'écran horizontalement jusqu'à un certain petit point de contrôle. Après cela, la barre de menus est masquée sous l'icône du commutateur. Code compact, beau et fonctionnel.

Voir la démo

Navbox stylisée à plusieurs niveaux par Andrew DeBrew

Dans cet extrait, le même effet a été reproduit en combinaison avec une fonction adaptative. Ce menu est étonnamment flexible et assez unique par rapport à d'autres exemples de solutions réactives.

Lorsque nous commençons à travailler avec un design réactif, nous rencontrons diverses techniques comment mieux gérer la modification de notre menu de navigation pour les écrans basse résolution. Les possibilités semblent infinies. Par conséquent, je vais vous montrer quatre approches principales avec leurs avantages et inconvénients. Trois d'entre eux sont réalisés en utilisant uniquement du CSS et un avec une petite quantité de JavaScript.

Introduction Dans le code présenté dans cet article, je n'utilise pas de préfixes de navigateur pour que le code de style reste facile à lire et à comprendre. En plus exemples complexes SCSS est utilisé. Chacun des exemples est hébergé sur CodePen, où vous pouvez voir le CSS compilé.

Toutes les approches de cet article utilisent HTML simple code que j'appelle "menu de base". L'attribut role est utilisé pour indiquer un type spécifique : menu horizontal (plein horizontal), liste déroulante (sélectionner), menu déroulant (personnalisé-dropdown) et canevas.

• Flux
• Laboratoire
• Projets
• À propos
• Contact

Pour le style, j'utilise la même requête multimédia pour toutes les options :

Écran @media et (largeur maximale : 44 em) ( )

1. Menu horizontal C'est l'approche la plus simple car il vous suffit de faire en sorte que la liste des éléments ait la largeur de la page entière :

• Flux
• Laboratoire
• Projets
• À propos
• Contact

@media screen et (max-width : 44em) ( nav ( ul > li ( width : 100%; ) ) )

Avantages

• Aucun JavaScript requis
• Pas de majoration supplémentaire
• Code de style simple

Défauts

• Prend trop d'espace sur l'écran

Un exemple de menu horizontal peut être vu sur le site CodePen. Cette approche masque le menu de base et affiche une liste déroulante à la place.

Pour obtenir cet effet, nous devons ajouter une liste déroulante au balisage de base. Pour que cela fonctionne, nous devrons ajouter du code JavaScript qui modifie la valeur de window.location .href lorsque l'événement onchange se produit
Projets Stream Lab À propos Contact
Masquer la liste sur les grands écrans :
nav ( > sélectionner ( display:aucun; ) )
Sur les petits écrans, nous masquons le menu principal et affichons une liste déroulante. Pour aider l'utilisateur à comprendre qu'il s'agit d'un menu - nous ajouterons un pseudo-élément avec le texte "Menu"
@media screen et (max-width: 44em) ( nav ( ul ( display: none; ) select ( display: block; width: 100%; ) &:after ( position: absolue; contenu : "Menu"; droite : 0 ; bas : -1em ; ) ) )
Avec un design supplémentaire, voici à quoi cela ressemble sur les écrans à basse résolution :

Avantages

• Ne prend pas beaucoup de place
• Utilise des contrôles "natifs"

Défauts

• Nécessite JavaScript pour fonctionner
• Du contenu en double se produit
• La liste déroulante ne parvient pas à styliser dans tous les navigateurs

Exemple de ce menu .3. Menu déroulant personnalisé Cette approche masque le menu de base sur les petits écrans et affiche l'entrée et l'étiquette à la place (en utilisant une case à cocher). Lorsque l'utilisateur clique sur l'étiquette, le menu de base s'affiche en dessous.
Problèmes liés à l'utilisation du hack de case à cocher Les deux principaux problèmes liés à cette solution sont :

Ça ne marche pas versions mobiles Safari (iOS< 6.0) . Невозможно кликнуть на label в браузере под iOS < 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label

Cela ne fonctionne pas sur le navigateur principal du système d'exploitation Versions Android inférieur ou égal à 4.1.2. Il y a longtemps, il y avait un bug dans le moteur WebKit qui ne permettait pas l'utilisation de pseudo-classes avec une combinaison de sélecteurs + et ~

H1 ~ p ( couleur : noir ; ) h1:hover ~ p ( couleur : rouge ; )
Cela n'a eu aucun effet car le hack de case à cocher utilisait la pseudo-classe :checked avec le sélecteur ~. Et jusqu'à ce que le bug soit corrigé dans WebKit 535.1 (Chrome 13) et dans WebKit 534.30, actuel pour Android 4.1.2, le hack ne fonctionnait sur aucun appareil doté du système d'exploitation Android.

4. Canvas Dans cette approche, sur les petits écrans, le menu de base est masqué et l'entrée et l'étiquette sont affichées comme dans l'option 3. Lorsque l'utilisateur clique sur l'étiquette, le menu de base flotte vers la gauche et le contenu se déplace vers la droite. . L'écran est divisé en 80 % de menu et 20 % de contenu (en fonction de la résolution et des unités utilisées dans le CSS)

Sur les grands écrans, nous cachons l'étiquette.
étiquette ( position : absolue ; gauche : 0 ; affichage : aucun ; )
Sur les petits écrans, nous placerons le menu en dehors du contenu de la fenêtre et afficherons l'étiquette et l'entrée. Pour masquer le menu, nous définissons sa largeur et sa valeur de position négative. Pour aider l'utilisateur à comprendre ce menu, nous ajouterons également un pseudo-élément avec le texte "≡" dans l'étiquette (comme le code "\2261" à utiliser comme contenu du pseudo-élément).

@media screen et (max-width : 44em) ( $menu_width : 20em; body ( overflow-x : caché; ) nav ( position : absolue; gauche : -$menu_width; width: $menu_width; ul > li ( width : 100 %; ) ) label ( display: block; ) label:after ( position: absolue; contenu: "\2261"; ) input:checked ~ nav ( left: 0; ) input:checked ~ .content ( margin-left: $ menu_width + .5em ; marge droite : -($menu_width + .5em); ) )

Avec un design supplémentaire, voici à quoi cela ressemble sur les écrans à basse résolution :

Avantages et inconvénients

• Code non sémantique (entrée/étiquette)
• HTML supplémentaire requis
• Le positionnement absolu de l'élément corporel donne la sensation d'une position fixe

Est-ce que cela fonctionne sous IE ? Toutes les techniques utilisées ont un seul objectif : créer un menu adaptatif pour navigateurs modernes! Et tout cela parce qu'il n'y a pas d'IE8 ou inférieur sur aucun appareils mobiles et, par conséquent, nous n’avons pas du tout besoin de nous inquiéter de cette question.

Tous les développeurs Web savent depuis longtemps que les sites Web doivent être rendus réactifs, mais tout le monde ne sait pas comment le faire correctement. Dans cette leçon, vous apprendrez à créer un menu réactif pour un site Web.

Pour plus de clarté, nous ferons une section avec un grand image de fond, composé d'un en-tête avec un logo et d'un menu horizontal.

Balisage HTML

La tâche est claire, à l'intérieur de la balise section, il y aura un en-tête de site, à l'intérieur duquel bloc div avec logo et barre de navigation. Il servira de conteneur pour le menu de listes à puces ul avec les éléments de menu-liens a .

• maison


• Recherche


• Prestations de service


• Nouvelles


• Photos


• Règles

Comme d'habitude, la structure HTML semble très simple - du code propre et rien de superflu, c'est agréable à regarder. Cependant, si vous regardez le résultat dans le navigateur, vous souhaiterez ouvrir rapidement le fichier de styles et commencer à embellir les choses.

C'est ce que nous allons faire maintenant.

Style de section - section

Dans notre cas, la section occupe le premier écran de l'ordinateur et la balise de section est remplie d'une grande photo de fond, contre laquelle seront situés tous les autres éléments.

Section (
arrière-plan : url(bg.jpg) ;
}

Il faut veiller à ce que l'arrière-plan, sans perturber les proportions de la photo, remplisse tout espace libre sur tous les appareils.

Taille du fond : couverture ;
hauteur : 100vh ;

Lorsqu'elle est visualisée sur de grands écrans, si la taille de la photo est insuffisante, elle commencera à se multiplier. Désactivons la répétition en arrière-plan.

Répétition en arrière-plan : pas de répétition ;

Sur téléphones portables, sans aligner l’arrière-plan au centre, il risque d’être tronqué.

Position de l'arrière-plan : centre central ;

La section est prête, nous y écrirons les styles pour l'en-tête.

Styliser l'en-tête du site Web

Avançons un peu et voyons de quels blocs sera composé l'en-tête - il s'agit d'un bloc div avec un logo et un bloc de navigation.

Comment mettre deux blocs d'affilée, car dans forme naturelle Les blocs sont-ils empilés les uns à côté des autres ? La méthode Flexbox s'acquitte parfaitement de cette tâche - elle l'aligne et l'aligne par rapport au conteneur d'en-tête comme nous en avons besoin.

Entête(
affichage : flexible ;
justifier-contenu : espace entre les deux ;
align-items : centre ;
}

La propriété box-shadow dessine une ombre inférieure sous l'en-tête, séparant ainsi visuellement l'en-tête du site du contenu. Il est préférable de définir la hauteur de l'en-tête non pas en pixels, mais en unités relatives, par exemple en pourcentage, les proportions des éléments du site seront alors conservées sur n'importe quel écran.

Taille : 18 % ;
box-shadow : 0 5px 15px rgba(0,0,0,.2);

On voit le résultat de flexbox et l'ombre qui apparaît ci-dessous.

Travailler avec un logo

Maintenant, le logo est pressé contre le bord gauche de la fenêtre du navigateur, déplaçons-le un peu vers la droite.

Image du logo (
marge gauche : 2,3em ;
}

Le code suivant rend le logo réactif.

Largeur maximale : 100 % ;

Style de menu - ul

Supprimez les marqueurs des éléments de menu.

Ul(
type de style de liste : aucun ;
}

Nous transformons menu verticalà l'horizontale, en alignant le tout au centre, en utilisant la méthode flexbox. La propriété de transition assure le bon fonctionnement de l’effet de survol, nous en reparlerons plus tard.

Ul(
affichage : flexible ;
flux flexible : nowrap ;
direction flexible : rangée ;
justifier-contenu : centre ;
align-items : centre ;
transition : 0,5 s ;
}

Les éléments du menu li sont très proches les uns des autres et nous devons travailler avec la police et les liens.

Définissons les marges autour des éléments de menu.

Ulli un (
remplissage : 10px 20px ;
}

Faisons le texte en majuscule et supprimez le soulignement des liens.

Transformation de texte : majuscule ;
décoration de texte : aucune ;

Nous choisissons une police plus foncée pour le contraste et la rendons en gras (ça m'énerve quand la couleur du texte se confond avec Couleur de l'arrière plan site).

Couleur : #262625 ;
poids de la police : gras ;

Créez un simple effet de survol et n’oubliez pas la transition en douceur.

Ulli a: survol (
arrière-plan : #000 ;
couleur : #fff ;
transition : 0,5 s
}

Dans la prochaine leçon, nous rendrons notre menu réactif en effectuant des requêtes multimédias. Voir tout le code sur jsfiddle.