Menu adapté en CSS. Navigation réactive pour les menus

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…

Adaptatif menu horizontal

Commenç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

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 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.

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 de menu habituel pour les écrans d'ordinateur et grands écrans ressemblera à ceci :

Sur les appareils mobiles, le menu développé apparaîtra comme ceci :

Le principe de construction d'un menu adaptatif universel.

Ainsi, pour créer un tel menu, vous aurez besoin de :

Créez un cadre HTML.

Appliquer styles CSS.

Connectez le gestionnaire de script.

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 réactif. Étape 1. Création HTML structure des menus.

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

Note: Orange J'ai décrit 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 nous confondre avec , nous relierons les styles sous la forme 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 Je suggère de regarder un tutoriel vidéo pour voir comment fonctionne un menu réactif et comment l'installer sur un site Web.

C'est tout pour moi aujourd'hui, je vous souhaite du succès et à bientôt dans de nouveaux articles et tutoriels vidéo !

Portail avec des menus complexes. Nous avons décidé d’écrire des scripts uniquement si nous ne trouvons pas ce dont nous avons besoin en ligne. Plusieurs navigations différentes étaient prévues avec différentes fonctionnalités. Heureusement pour nous, presque tout a été retrouvé sauf un. Cependant, juste avant de commencer à travailler sur l'écriture de ce menu, nous avons quand même réussi à trouver ce dont nous avions besoin.
J'ai beaucoup essayé menus adaptatifs. Dans ce sujet, j'ai décidé de faire une sélection des plus intéressantes et des plus intéressantes que nous devions essayer. Tous les menus adaptatifs ne se ressemblent pas et sont conçus exclusivement pour des tâches spécifiques.
Donc. Voici 5 menus adaptatifs pour toutes les occasions.

flexMenu C'est exactement le menu qui était si difficile à trouver et dont nous étions sur le point de commencer à écrire les fonctionnalités.
flexMenu - un menu adapté aux sites dont la largeur change dynamiquement. Sa caractéristique principale et unique est l'ajout de l'élément « Plus » et le transfert vers sa liste déroulante des éléments qui ne rentrent pas dans la largeur de toute la navigation. Autrement dit, si nous regardons les grands moniteurs, nous verrons tous les points. Dès que nous commençons à réduire la fenêtre du navigateur, l'élément « Plus » apparaîtra à la fin du menu et les éléments qui ne rentrent pas lorsque la fenêtre se rétrécit seront déplacés dynamiquement vers sa liste déroulante. Ainsi, nous aurons un menu avec une hauteur fixe et une largeur de « jeu ».
En travaillant avec flexMenu, nous avons rencontré un problème. Dans notre cas, à droite se trouvait un logo avec float: left;, à droite était placé ce menuégalement avec float : gauche ; et à droite avec float : right ; il y avait un autre bloc. Lors du redimensionnement de la fenêtre du navigateur, il s'est avéré que le bloc de droite sautait sous le menu, puis tout cela sautait sous le logo, puis la fonctionnalité de compression du menu était activée. La manière de gérer cette fonctionnalité de mise en page sera abordée dans les rubriques suivantes. Restez à l'écoute Codez un menu de navigation réactif Un excellent exemple de menu de navigation. Lors du redimensionnement de la fenêtre du navigateur, nous verrons que les éléments se chevauchent et sont alignés en largeur. Ça a l'air très soigné. Plus important encore, ce menu adaptatif aura fière allure sur les appareils mobiles et, plus important encore, il est pratique à utiliser sur les appareils dotés d'un écran tactile.

Menu plat multi-niveaux - navigation adaptativeMulti-level Flat Menu est un menu adaptatif à plusieurs niveaux qui fonctionne en utilisant Bibliothèques Jquery. Sur les moniteurs de bureau, nous voyons le menu horizontal habituel et familier. Sur les appareils mobiles, la navigation horizontale se transforme en liste déroulante.
Menu plat à plusieurs niveaux - Bon choix, si vous avez besoin d'économiser de l'espace sur la page.

Revenant au sujet de l'importance toujours croissante des appareils mobiles, il est impossible d'ignorer le menu du site. Pour la plupart, les solutions JavaScript sont utilisées pour créer des menus adaptatifs, mais est-ce toujours justifié ? Je pense que non. Après tout, cela peut être fait en utilisant du CSS pur, en modifiant la visibilité des éléments à l'aide d'une case à cocher.

Nous ne parlerons pas longtemps des avantages et des inconvénients de cette approche, mais nous nous tournerons immédiatement vers exemple spécifique. Dans ce cas, il s'agira d'un simple menu à un seul niveau.

Que faire avec menus à plusieurs niveaux? Il existe plusieurs options ici :

commencez à chercher des solutions JavaScript/jQuery
ouvrir le deuxième niveau en survol (ce qui, je dois l'avouer, n'est pas une bonne solution)

Le balisage sera un peu plus détaillé que nécessaire : il contient des éléments qui peuvent ne pas être utiles du tout. Cependant, c’est assez simple et pas difficile à comprendre.

Menu CSS pur

Menu CSS

Juste du CSS et du HTML

modes

Sur les appareils dotés d'un écran inférieur à 640 pixels, les éléments de menu sont masqués et seule la case à cocher stylisée via l'étiquette demeure. Si la case est cochée, le menu devient visible. Code de mise en œuvre :

/* Menu */ #menu-checkbox ( /* case à cocher masquée */ affichage : aucun ; ) .main-menu ( /* éléments de menu masqués */ affichage : aucun ; remplissage : 0 ; marge : 0 ; ) .main-menu li ( /* les éléments de menu sont disposés verticalement */ /* chacun a une largeur de 100% */ font-size : 1em ; display : block ; width : 100% ; ) .main-menu a ( /* style les liens a bit */ affichage : bloc ; bordure inférieure : 1px bleu-violet uni ; couleur : gris clair ; remplissage : 0,5 em ; décoration de texte : aucun ;).menu principal a: survol (décoration de texte : souligné ;).bouton bascule (text-align: center ; display : block ; /* n'oubliez pas d'indiquer explicitement ce que doit être le curseur */ curseur : pointer ; background-color : #333 ; color : #fff ; ) .toggle-button :after ( /* récupère les données de l'attribut data- open en html */ content : attr (data-open ); display : block ; margin : 10px 0 ; padding : 10px 30px ; ) #menu-checkbox :checked + nav [ role = " navigation" ] .main-menu ( / * lorsque la case à cocher est active, le menu devient visible */ display : block ; ) #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :after ( content : attr (data-close ); )

AVEC appareils mobiles deviner. Il reste à apporter des modifications pour les appareils dont l'écran est >= 640px. Nous le ferons via les requêtes des médias.

@media screen et (min-width : 640px ) ( .toggle-button ( /* label caché */ display : none ; ) .main-menu ( display : block ; margin : 0 auto ; background-color : #333 ; height : 30px ; ) .main-menu li ( /* balises

disposés en rangée */ largeur : calc (100% / 5 ); alignement du texte : centre ; affichage : bloc en ligne ; marge-droite : -4px ; ) .main-menu a ( display : inline-block ; margin-right : -4px ; font-size : .8em ; background-color : #333 ; text-decoration : none ; color : #fff ; text-transform : majuscule ; bordure inférieure : 0 ; ) )

Voyons ce qui se passe:

Cet exemple peut être trouvé.

Styliser une étiquette

Bien sûr, vous pouvez utiliser n'importe quoi à la place de l'ouverture/fermeture des données. Par exemple, ajoutez une police d'icône.

Bouton bascule : après ( font-family : "fontello" ; contenu : "\e804" ; curseur : pointeur ; remplissage : 15px ; police-size : 1.5em ; text-align : center ; ) #menu-checkbox :checked + .menu-main .bouton-toggle :après ( contenu : "\e804" ; )

Ou une icône accompagnée d'un texte explicatif :

Ici, nous obtenons la valeur des attributs data-open/close, affichons les données en utilisant before et ajoutons l'icône elle-même en utilisant le pseudo-élément after.

Bouton bascule : avant ( contenu : attr (data-close ); taille de police : 1rem ; position : relative ; droite : 3px ; bas : 3px ; ) .bouton bascule : après ( contenu : "\f0c9" ; police- famille : "FontAwesome" ; display : inline-block ; ) #menu-checkbox :checked + nav [ role = "navigation" ] .menu ( display : block ; ) #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :after ( contenu : "\f0c9" ; font-family : "FontAwesome" ; couleur : vert ; ) #menu-checkbox :checked + nav [ role = "navigation" ] .toggle-button :before ( la couleur verte ; )

Dans les deux derniers exemples, le lecteur devra jouer avec le positionnement des icônes et l'emplacement du texte lui-même.

Il ne faut pas s'attendre à des effets incroyables d'une telle implémentation de menu, même s'il ne faut pas oublier les possibilités de l'animation CSS.

Site sur l'informatique

ARTICLES LIÉS