Menu CSS3 réactif. Excellent aperçu de superbes menus à plusieurs niveaux avec codepen
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 créerons une section avec une grande image d'arrière-plan, composée d'un en-tête avec un logo et d'un menu horizontal.
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 il y aura un bloc div avec un logo et une barre de navigation. Il sera utilisé comme conteneur pour un menu de listes à puces ul avec des éléments de menu-liens a .
- Maison
- Recherche
- Services
- 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 - sectionDans 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) ;
}
Nous devons nous assurer que l'arrière-plan, sans perturber les proportions de la photo, remplit tout l'espace libre de n'importe quel appareil.
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 les téléphones portables, sans centrer l’arrière-plan, celui-ci 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.
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 aligner deux blocs, car dans leur forme naturelle, les blocs se tiennent l'un sous l'autre ? 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.
En-tête (
affichage : flexible ;
justifier-contenu : espace entre les deux ;
aligner les éléments : 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.
Hauteur : 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.
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 - ulSupprimez les marqueurs des éléments de menu.
Ul(
type de style de liste : aucun ;
}
Nous transformons un menu vertical en un menu horizontal, en alignant 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 ;
aligner les éléments : 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 ;
}
Nous mettrons le texte en majuscules et supprimerons 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 (je déteste quand la couleur du texte se fond dans la couleur de fond du 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.
Bonjour, chers amis. Aujourd'hui, je vais vous expliquer comment créer un menu réactif pour un site Web. Nous créerons un menu horizontal qui s'adaptera aux écrans des appareils mobiles. Et sa polyvalence réside dans le fait que quelle que soit la technologie de création de votre site, ce menu fonctionnera sur n'importe quel site. Autrement dit, il suffit de corriger les liens, les noms des éléments de menu et d'ajuster les styles en fonction de votre conception.
Auparavant, j'avais déjà publié un article dans lequel je partageais. Et aujourd’hui, nous allons voir une autre manière.
L'affichage habituel du menu pour les moniteurs d'ordinateur et les grands écrans ressemblera à ceci :
Sur les appareils mobiles, le menu développé apparaîtra comme ceci :
Ainsi, pour créer un tel menu, vous aurez besoin de :
Bien sûr, vous disposez d’un menu sur votre site Web et vous souhaitez le rendre adaptatif. Vous avez deux manières, la première consiste à adapter le menu existant et la seconde consiste à créer un nouveau menu adaptatif.
Sur la plupart des sites réalisés sur un CMS, il est plus facile de créer un nouveau menu que de refaire l'ancien. Étant donné que la construction du menu elle-même est implémentée via PHP et des requêtes de base de données, les styles CSS sont dispersés parmi de nombreux autres styles. En général, tout ce processus de refonte du menu est une tâche assez laborieuse et minutieuse.
Sur les sites auto-écrits, il y aura moins de travail de modifications, mais il faudra quand même bricoler.
Dans tous les cas, vous pouvez utiliser les styles et script de cet article et adapter votre menu.
Et pour créer un nouveau menu adaptatif, vous aurez besoin de très peu de temps. Initialement, un menu est créé basé sur les balises ul et li, puis des styles CSS sont ajoutés et le script est connecté. Ce menu se charge et répond plus rapidement car il fonctionne sans requêtes vers la base de données.
Les styles CSS, pour plus de commodité, sont inclus dans des fichiers séparés. Bien qu'ils puissent être inclus dans les styles principaux du site. Je vais montrer un exemple de connexion de styles via des fichiers séparés.
Le processus de création d'un menu adaptatif Étape 1. Création d'une structure de menu HTML.La première étape consiste à décider où le menu sera affiché. Pour ce faire, vous devez analyser vos fichiers modèles. En règle générale, le menu est affiché dans l'en-tête ou dans la barre du site. Les fichiers header.php et sidebar.php sont responsables de ces blocs principaux du modèle. C'est en eux qu'il faut chercher un endroit pour insérer un menu ou remplacer un ancien. Pour chaque modèle, il s'agit d'un processus individuel.
Après avoir décidé de l'endroit où insérer le nouveau menu, vous devez placer ce cadre HTML à cet endroit et remplacer les éléments de menu et les liens par les vôtres.
Affaires sur Internet
Remarque : j'ai utilisé l'orange pour indiquer les éléments que vous modifiez pour votre site. Des éléments de menu peuvent être ajoutés et supprimés. Je vous montre comment procéder dans un didacticiel vidéo. Ce code est responsable de la flèche du menu déroulant : . Si vous disposez de plusieurs éléments de menu déroulant, utilisez ce code.
Étape 2. Connexion des styles CSS.Afin de simplifier le processus et de ne pas confondre avec , nous inclurons les styles sous forme de fichiers séparés. Les fichiers de style sont inclus dans le fichier header.php entre les balises …. C'est du moins le cas dans la plupart des modèles modernes.
Votre tâche consiste à trouver où le fichier de style principal style.css est connecté et en dessous de connecter les styles de menu adaptatifs.
Mais d’abord, vous devez télécharger les fichiers avec les styles et le script. Après cela, copiez les fichiers bootstrap.css et menu.css dans votre dossier de thème. Et puis dans le fichier header.php, entre les balises HED, ajoutez ces lignes de connexion :
Étape 3. Connexion de la bibliothèque jQuery et du script du gestionnaire.
Et pour terminer l'adaptation du menu, vous devez ajouter la connexion de la bibliothèque jQuery et un script qui ouvrira le menu lorsque vous cliquerez dessus.
Et même si vous avez probablement déjà connecté la bibliothèque jQuery, vous la verrez entre les balises HED dans le fichier header.php, juste au cas où, je vais vous montrer comment la connecter. Et en même temps, nous connecterons le script du gestionnaire que vous avez téléchargé dans l'archive.
Dans le même fichier header.php, avant de fermer la balise, insérez ces lignes de code :
Remarque : le fichier bootstrap.min.js, ainsi que les styles, doivent également être copiés dans le dossier de thème de votre site. Peut-être que votre thème a un dossier JS, puis copiez-y ce fichier et incluez-le dans le chemin du fichier.
Voilà, tout est prêt, vous pouvez vérifier le résultat. Les requêtes média sont construites au point 768 px ; dès que l'écran du navigateur devient plus petit que cette valeur, le menu s'adapte. Vous pouvez modifier le point de requête multimédia dans les fichiers de style.
Et maintenant, comme exemple clair du fonctionnement d'un menu réactif et de la manière de l'installer sur un site Web, je suggère de regarder un didacticiel vidéo.
C'est tout pour moi aujourd'hui, je vous souhaite du succès et à bientôt dans de nouveaux articles et tutoriels vidéo !
Bonjour. Je n'ai pas écrit d'articles sur le thème du travail html/css depuis très longtemps. Récemment, je viens de commencer à créer une nouvelle mise en page et, ce faisant, je suis tombé sur une astuce intéressante qui vous permet de rendre le menu flexible (vous pouvez y ajouter de nouveaux éléments et la taille n'augmentera pas, mais sera toujours de 100 % de la taille). bloc parent). Aujourd’hui, nous allons donc implémenter un menu en caoutchouc utilisant CSS.
Si vous êtes trop paresseux pour lire l'article, vous pouvez regarder cette vidéo. L'auteur explique également tout très bien :
La première étape est toujours le balisage HTML, où serions-nous sans lui ? Mais dans notre cas tout sera simple :
Tout est clair, voici mon code de balisage :
Tout cela semble standard, comme ceci :
Maintenant, nous allons tout mettre sous la forme souhaitée, CSS se mettra au travail.
Passons maintenant au menu lui-même. Je vais en supprimer les marqueurs (la balise ul), en faire un arrière-plan et, plus important encore, utiliser la propriété display: table-row pour que le conteneur du menu se comporte comme une ligne de tableau. Ceci est important à faire pour d’autres manipulations.
R-menu (arrière-plan : dégradé linéaire (à droite, #b0d4e3 0 %, #88bacf 100 %); affichage : ligne de tableau ; style de liste : aucun ; )
Comme vous pouvez le voir, le code ci-dessus vient de résoudre tout ce que j'ai écrit. À propos, il est pratique de générer des dégradés à l'aide de l'outil générateur de dégradés Ultimate CSS.
R-menu li (alignement vertical : bas ; affichage : cellule de tableau ; largeur : auto ; alignement du texte : centre ; hauteur : 50 px ; bordure droite : 1 px solide #222 ; )
- vertical-align: bottom - cette propriété est nécessaire pour que si le texte d'un élément de menu prend 2 lignes, il soit affiché uniformément. Lorsque nous créons le menu, vous pouvez supprimer cette propriété, zoomer pour que les éléments soient compressés et que le texte soit déplacé sur deux lignes et vous verrez un problème d'affichage. Rendez la propriété et tout ira bien.
- display: table-cell - puisque nous définissons le menu d'affichage lui-même pour qu'il soit une ligne de tableau, il serait logique de définir ses éléments pour qu'ils soient affichés sous forme de cellules dans un tableau. C'est un must.
- width: auto — la largeur sera calculée automatiquement, en fonction de la longueur du texte dans le paragraphe
- text-align: center - c'est juste pour centrer le texte à l'intérieur
- height: 50px — définissez la hauteur sur 50 pixels
- eh bien, la bordure droite est juste une bordure à droite, un séparateur pour les éléments
Jusqu’à présent, le menu semble inesthétique, mais ce n’est pas grave, il est temps d’y penser. 
La dernière chose à faire est de styliser les liens à l’intérieur des éléments. Voilà j'ai ce code :
R-menu li a (texte-décoration : aucun ; largeur : 1000 px ; hauteur : 50 px ; alignement vertical : milieu ; affichage : cellule de tableau ; couleur : #fff ; police : normale 14px Verdana ; )
Et voici à quoi ressemble le menu maintenant :
Encore une fois, permettez-moi d'expliquer quelques lignes :
- la propriété text-decoration remplace le soulignement par défaut pour les liens
- width: 1000px est peut-être la ligne la plus importante. Vous devez définir les liens sur environ cette largeur, peut-être moins, mais certainement plus grande que l'élément de menu le plus large possible. Les liens n'auront pas 1000 pixels de large, puisque la largeur sera limitée par l'élément de menu li, dont la largeur est définie sur auto, mais cela permettra de garantir que pour tout nombre d'éléments du menu, ce sera toujours 100 pour cent de la largeur.
- vertical-align : middle et display : table-cell - le premier alignera le texte verticalement au centre, et le second affichera également les liens sous forme de cellules. Les deux propriétés sont nécessaires.
- police - eh bien, ce n'est qu'un ensemble de paramètres pour la police. Découvrez les propriétés CSS des polices dans .
Par exemple, pour que la couleur d'un élément de menu change lors du survol. Cela peut être implémenté assez simplement, en utilisant la pseudo-classe hover :
R-menu li:hover( couleur d'arrière-plan : #6bba70; )
Tester le caractère caoutchouteux du menuSuper, les menus sont prêts, mais nous n'avons pas vérifié le plus important : à quel point ils sont caoutchouteux, comme je vous l'avais promis. Eh bien, je vais ajouter 2 éléments supplémentaires au menu :
Le menu reste large de 600 pixels. Les éléments restants ont simplement été légèrement réduits pour accueillir 2 nouveaux éléments.
J'ajouterai encore un long point :
Comme vous pouvez le constater, le menu s'est un peu plus rétréci et la rubrique longue s'affiche tout à fait normalement. Et sans la propriété vertical-align: bottom dont je vous ai parlé, le menu aurait l'air pire.
Je vais réduire le menu à trois éléments.
Les éléments sont devenus beaucoup plus libres, mais le menu lui-même n'a pas changé en largeur. Nous avons donc réalisé un menu 100% caoutchouc !
En principe, si vous définissez le bloc wrapper sur une largeur maximale plutôt que sur une largeur fixe, il n'a même pas besoin d'être adapté. Dans mon cas, j'ai la propriété max-width : 600px et lorsque la largeur devient inférieure à 600 pixels, le bloc va simplement rétrécir avec l'écran, sans former de défilement horizontal.
Eh bien, si vous souhaitez modifier ou corriger d'une manière ou d'une autre le menu sur les appareils mobiles ou les écrans larges, nous pouvons vous aider ! Bonne chance dans la création de sites Web !
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 d'écrire des articles sur ces sujets pendant mon temps libre.
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 WebGoogle 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éactifCommençons par le HTML. Tout d'abord, incluons la 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
AvisComme 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 (largeur maximale: 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 mis dans un fichier séparé et je l'ai 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.
Tous les projets ne nécessitent pas d'effets inutiles, qui peuvent charger considérablement les pages, notamment lorsqu'il s'agit d'une mise en page adaptative, où l'utilisateur peut visualiser le site sur des smartphones ou des tablettes. La plupart de ces effets sont créés à l'aide de JavaScript, j'ai donc décidé, à titre d'exemple, de montrer comment créer l'un des éléments les plus importants du site, à savoir le menu de navigation, pratiquement sans recourir à JS, mais surtout uniquement en utilisant CSS. Il est absolument impossible de refuser d'utiliser JS car sur les appareils mobiles et les ordinateurs ou ordinateurs portables ordinaires, de nombreux événements sont différents et, si sur un ordinateur en CSS, nous pouvons utiliser la propriété en toute sécurité :flotter, alors cela ne fonctionnera pas sur une tablette comme nous le souhaiterions. Les plus impatients peuvent immédiatement ( dans l'exemple, modifiez la largeur de la fenêtre du navigateur).
Nous nous sommes donc fixés la tâche suivante : créer un menu flexible en largeur, avec passage à sa version mobile, où le menu se déroulera au survol ou en cliquant sur un bouton. La structure HTML est typique pour de tels éléments, sauf que nous ajoutons un élément supplémentaire - un bouton pour développer/masquer le menu dans la version mobile :
≡
CSS n'est pas entièrement standard. Nous ferons en sorte que notre menu se comporte comme si nous utilisions une table. Je tiens immédiatement à souligner que tous les navigateurs ne prennent pas en charge les propriétés que nous utiliserons. Des problèmes peuvent survenir avec les versions d'IE inférieures à la version 8 ( même s'il est temps d'arrêter de se concentrer sur eux) et il y a quelques petites difficultés avec IE8, mais j'écrirai ci-dessous comment les résoudre.
* ( margin : 0 ; padding : 0 ; ) header ( background-color : #C0C0C0 ; ) #menu ( display : table ; /* description ci-dessous */ width : 100% ; border-collapse : réduire ; -webkit-box- dimensionnement: border-box; /* description ci-dessous */ -moz-box-sizing: border-box; /* description ci-dessous */ box-sizing: border-box /* description ci-dessous */ ) #menu ul ( display: table-row; /* description ci-dessous */ background-color: #FFFFFF; list-style: none; ) #menu ul li ( display: table-cell; /* description ci-dessous */ border: 1px solid #999999; ) # menu ul li a ( affichage : bloc en ligne ; largeur : 100 % ; hauteur : 50 px ; hauteur de ligne : 50 px ; taille de police : 1,2 em ; alignement du texte : centre ; ) #menu ul li a: survol ( arrière-plan- couleur : #990000 ; couleur : #FFFFFF ; ) #nav_button (affichage : aucun ; largeur : 50 px ; hauteur : 50 px ; taille de police : 2,5em ; alignement du texte : centre ; couleur d'arrière-plan : #FFFFFF ; bordure : 1 px solide #949494; curseur : pointeur ; ) @media screen et (largeur maximale : 600 px) ( /* description ci-dessous */ #menu ( affichage : bloc en ligne ; position : relative ; largeur : auto; ) #menu ul ( affichage : aucun;
position : absolue ;
haut : 0 ;