Menu latéral adaptatif. Menu latéral fixe utilisant du CSS pur. Passer à la bibliothèque jQuery

Comme le menu de navigation du site, le menu du profil utilisateur, etc., vous pouvez les masquer et ils apparaîtront lorsque vous cliquerez et survolerez. Certains pourraient dire que cela affecte la convivialité de la page. Je ne pense pas, car la page devient plus propre, ce qui signifie qu’il est plus facile de naviguer. Une personne ne se perd pas dans une montagne de liens.
Aujourd'hui, j'ai préparé une collection de panneaux de diapositives masqués par défaut sur la page. Pour appeler le menu, vous devez cliquer ou survoler l'icône correspondante. Cette technique est arrivée à la conception Web à partir d'applications mobiles, où il est impossible de disposer plusieurs éléments sur un seul écran. Au fil du temps, ces panneaux ont migré vers des sites Web. Cette collection sera utile avant tout aux développeurs mobiles. Avec une petite résolution d'écran, c'est exactement ce type de navigation contextuelle qui apparaîtra, mais sur de grands moniteurs normaux, vous pouvez créer le menu habituel auquel tout le monde est habitué. De cette façon, une personne possédant un appareil mobile ne se trompera pas sur votre site, puisqu'elle est habituée depuis longtemps à utiliser des panneaux coulissants, car toutes les applications de son smartphone fonctionnent sur le même principe.
Je voudrais noter que cette collection comprend des plugins conçus uniquement pour les sites mobiles et que leur utilisation sur de grands écrans serait inappropriée. Bien qu'il existe également des panneaux universels adaptés à n'importe quel site Web. Regardez la démo et choisissez ce qui correspond à vos besoins.
Les panneaux déroulants fonctionnent sur . La mise en œuvre d'un tel menu sur votre site Web ne sera pas difficile et les sites Web des développeurs contiennent des instructions détaillées sur la façon d'utiliser leur produit.
Bientôt, nous prévoyons une refonte du site Web Postovoy et utiliserons l'un des plugins jquery présentés ci-dessous dans la mise en page.
Donc. Nous attirons votre attention sur une collection de 20 plugins de panneau de diapositives déroulants jquery pour votre site Web. N'oubliez pas de laisser des commentaires.

Menu latéral coulissant Un joli menu de navigation coulissant dans jquery sous la forme d'un panneau coulissant. Idéal aussi bien pour un site mobile que pour un site classique.

Transitions pour les navigations hors canevas Un plugin extrêmement puissant qui vous permet d'organiser un panneau de diapositives qui s'affichera avec divers effets d'animation, notamment 3D. Le plugin comprend 14 effets d'animation.

jPanelMenuLe panneau de navigation est conçu dans le style des applications iOS. Un menu simple et rapide qui facilitera le développement d'un site mobile.

Recréer le menu Google Nexus Le panneau coulissant est conçu de manière similaire au menu Google Nexus.

bigSlide - panneau de navigation par diapositives dans Jquery Le panneau de diapositives convient aussi bien à un site mobile qu'à un site classique. Pour l'appeler, vous devez cliquer sur l'icône représentant trois bandes.

Le plugin Multi-Level Push MenuJqutry fonctionne de la même manière que bigSlide. Le panneau est appelé lorsque vous cliquez sur l'icône. L'avantage de ce menu est qu'il prend en charge une structure à plusieurs niveaux.

Menu du couvercle de la boîte Une très belle barre coulissante de navigation avec un effet 3D.

Menus à bordure animée En cliquant sur le signe plus dans le coin de l'écran, une petite barre latérale avec des icônes apparaît. Pour le masquer, vous devez cliquer sur l'icône avec le symbole « - ».

Le panneau Snap.js Slide est conçu pour les appareils mobiles. Le menu est appelé en faisant glisser l'écran avec le curseur de la souris ou, si vous êtes sur un appareil mobile, avec un doigt.

Menus coulissants et poussoirs |

Le plugin MenyJquery vous permet d'implémenter une barre de navigation sympa avec un effet 3D sur votre site Web.

mb.jquery Contrairement aux autres panneaux, il apparaît en haut de l'écran plutôt que de le déplacer. Vous pouvez mettre n’importe quel code HTML, texte ou tout ce que vous voulez dans le bloc.

Dock AndroidLe panneau est conçu pour les sites mobiles et est situé en bas de l'écran. Lorsque vous cliquez dessus, des icônes apparaissent dans lesquelles vous pouvez placer des liens.

Panneau coulissant avec contenu Le panneau coulissant sympa est conçu sur deux niveaux. Le premier est le menu. La seconde est le contenu. Cet effet est désormais très populaire parmi les concepteurs et les développeurs Web. Vous pouvez trouver de nombreuses applications. Le logiciel de messagerie de Microsoft fonctionne sur un principe similaire.

Nous allons maintenant créer rapidement et facilement un menu vertical qui sortira de manière animée sur le côté lorsque vous appuierez sur le bouton pour l'appeler.

ÉTAPE 1. Ajout d'un menu au fichier HTML

Collez le code ci-dessous dans le fichier html :

Vous voyez que pour tous les boutons de menu, y compris le bouton de menu lui-même, la classe openButton a été ajoutée. Ceci est fait pour que notre script, que nous allons connecter, puisse lier les clics de ces boutons aux actions d'ouverture et de fermeture du menu.

ÉTAPE 2. Ajout de styles

Nous allons maintenant styliser un peu notre menu et tous les boutons. Collez le code ci-dessous dans votre fichier CSS :

Bouton (arrière-plan : transparent ; bordure : transparente ; contour : aucun ; curseur : pointeur ; marge : 50px 90px ; poids de la police : gras ; taille de la police : 24px ; couleur : #6c7d96 ; transition : 0,2 s ; ) bouton : survol ( transition : 0,2 s ; opacité : 0,7 ; ) bouton : actif ( transition : 0,2 s ; opacité : 0,4 ; ) navigation ( couleur d'arrière-plan : #6c7d96 ; largeur : 250 px ; position : relative ; gauche : -999 px ; transition : 0,5 s facilité ; ) nav ul li ( remplissage : 20px 0 ; alignement du texte : centre ; transition : 0,2 s ; ) nav ul li:hover ( curseur : pointeur ; couleur d'arrière-plan : # 454954 ; transition : 0,2 s ; ) nav ul li :active ( couleur d'arrière-plan : #23252b ; transition : 0,2 s ; ) nav ul li a ( couleur : blanc ; décoration du texte : aucune ; poids de la police : gras ; taille de la police : 21 px ; )

La partie la plus importante du code est écrite dans le sélecteur de navigation. En utilisant le positionnement relatif, nous masquons notre menu au-delà de la partie visible de la page en attribuant une valeur négative à left .

Note: Vous pouvez également utiliser le positionnement fixe si vous devez coller le menu à l'écran pendant le défilement. Cela fonctionnera de la même manière que notre version.

ÉTAPE 3. Connexion du script

Dans votre fichier js vous devez insérer ce code :

$(document).ready(function() ( $(".openButton").click(function() ( if(!$(".openButton").hasClass("openDone")) ( $(".openButton" ).addClass("openDone"); $("nav").css("left", "0px"); ) else ( $(".openButton").removeClass("openDone"); $("nav" ).css("left", "-999px"); ) )); /* Connectez-vous lorsque vous souhaitez initialement rendre le menu adaptatif après une certaine taille d'écran. Ce code résout le problème de la disparition aléatoire du menu lorsque l'écran du navigateur la taille change. Définissez la largeur ici lorsque ce qui permet la conception adaptative de votre menu $(window).resize(function() ( if ($(window).width() > 1200) ( $("nav ul li"). removeAttr("style"); ) )) ; */ ));

Le script vérifie l'événement click des boutons avec la classe openButton que nous leur avons donnée précédemment. Immédiatement, la présence de la classe openDone est vérifiée. En fonction de la présence de cette classe dans les boutons, ce script décide de fermer ou d'ouvrir le menu.

À propos, nous n’avons inscrit cette classe nulle part. Cela agit comme une sorte d’interrupteur. Cela fonctionne de telle manière que lorsque vous cliquez sur le bouton « MENU », tous les boutons de la classe openButton sont ajoutés à la classe openDone. Et lorsque l'utilisateur clique à nouveau sur l'un des boutons du menu, le script supprime la classe openDone de ces boutons.

En conséquence, cette classe n'est nécessaire que pour le script, afin qu'il comprenne à quels moments le menu doit être affiché et à quelles heures il doit être fermé. Si nous n'avions pas ajouté la classe openDone, le script ne fonctionnerait pas correctement et le menu, lorsque vous cliquez sur le bouton Ouvrir, s'ouvrirait et se fermerait simplement instantanément.

Note: Le code commenté ci-dessous doit être inclus si vous utilisez ce script pour animer la version adaptative de votre menu horizontal. Cela résout le problème de la disparition des menus lorsque la taille de l'écran augmente.

Résumé

Nous avons créé le menu animé le plus simple possible qui apparaît sur le côté lorsque vous appuyez sur un bouton. Comme vous pouvez le constater, il n'y a absolument rien de compliqué ici. Vous pouvez améliorer ce code et le modifier à votre guise.

Il existe de nombreuses solutions toutes faites pour créer de tels panneaux à l'aide de jQuery, de plugins et de modules séparés pour divers systèmes de gestion de contenu.
Tout cela est très bien, mais est-il possible d'implémenter des panneaux coulissants latéraux en utilisant exclusivement CSS ? Bien sûr vous pouvez! Mais soyez prudent))), en gardant à l’esprit que tous les navigateurs ne prennent pas aussi bien en charge les propriétés CSS3 modernes.

Il n'y a pas si longtemps, il a « produit en montagne » une solution et un exemple de travail. L’un des premiers commentaires a été : « mettons-le de côté... ». Pourquoi pas? Allons)).

Aujourd'hui, je vais vous expliquer et vous montrer un exemple de la façon dont vous pouvez utiliser la « magie CSS » pour créer un menu clic-clic entièrement fonctionnel.
Pour commencer, selon la tradition établie, nous examinons un exemple réel du fonctionnement du panneau, puis, avec ceux qui en ont besoin, nous examinerons l'ensemble de la disposition, quoi, comment et pourquoi. En anticipant les questions, j'ai préparé des options pour l'emplacement du menu, à gauche et à droite :

Balisage HTML

Commençons l'analyse avec un interrupteur de panneau, pour lequel nous utilisons un indicateur standard () :

Nous plaçons la case à cocher en haut du document, de préférence juste après la balise. Nous écrivons l'attribut caché, indiquant directement l'état « caché » de cet élément, et attribuons également un identifiant unique, id="nav-toggle" par exemple, à lier avec l'attribut for de la balise, que nous allons concevoir et utiliser comme bouton bascule de panneau.

En tant que wrapper pour le contenu de la barre latérale, j'ai utilisé une balise avec une classe spécifique class="nav" , puisqu'Internet Explorer jusqu'à la version 8.0 incluse ignore cette balise, vous pouvez utiliser la balise habituelle.
À l’intérieur du conteneur de base, nous plaçons le contenu dont nous avons besoin.
Tout d'abord, nous écrirons une étiquette (tag) formée en CSS sous la forme de ce même « bouton hamburger », à l'aide duquel nous établirons une connexion avec la case à cocher cachée. Pour ce faire, il est nécessaire que le nom de l'attribut for corresponde à l'identifiant de la case à cocher. L'attribut onclick vide est utilisé dans iOS

site web

< ul> < li>< a href= "#1" >Un< li>< a href= "#2" >Deux< li>< a href= "#3" >Trois< li>< a href= "#4" >Quatre< li>< a href= "#5" >Cinq< li>< a href= "#6" >Six< li>< a href= "#7" >Sept

Un
Deux
Trois
Quatre
Cinq
Six
Sept

Ceci conclut notre balisage de menu latéral. Certes, il existe une autre fonctionnalité totalement facultative, à savoir l'assombrissement de l'arrière-plan du contenu principal lorsque le panneau est allumé. Si tu en as besoin, juste
Écrivez sous le menu, ou n'importe où ailleurs dans le corps de la page, un conteneur div supplémentaire avec une classe spécifique :

< div class = "mask-content" >

Dans la démo, j'ai exclu cette fonctionnalité du travail par défaut, en commentant ce bloc ; si vous en avez soudainement besoin, vous pouvez facilement la trouver et l'activer tout aussi facilement))).
De manière générale, pour faciliter la compréhension du html de la page de démonstration, j'ai écrit des commentaires détaillés pour chaque élément, vous devrez donc faire de gros efforts pour vous perdre.

Ainsi, tous les éléments nécessaires sont en place, le plus important et le plus intéressant reste, pour former l'apparence, la couleur, la forme et donner du mouvement à notre menu. Nous ferons tout cela exclusivement en utilisant CSS. Pas de javascript ni d'images supplémentaires.

CSS

Je ne décrirai pas chaque règle et propriété, puisque je l'ai fait directement dans le code CSS lui-même.
Les styles des panneaux situés à gauche ou à droite sont presque les mêmes, ne différant que par quelques valeurs. Dans l'archive source, les deux options sont regroupées sous forme de fichiers distincts, alors choisissez celle dont vous avez besoin, connectez-la correctement au document, et c'est tout.
Ici, je poste le « css haché » pour le menu qui glisse depuis le bord gauche de la page :

/** * La barre de navigation latérale commutable * glisse en cliquant sur la gauche */ . nav ( /* la largeur est arbitraire, n'hésitez pas à expérimenter */ width: 320px; min-width: 320px; /* corrige et règle la hauteur du panneau au maximum */ height: 100%; position: fixed; top: 0 ; bottom: 0 ; margin: 0 ; /* déplacer (masquer) le panneau par rapport au bord gauche de la page */ left: - 320px; /* remplissage interne */ padding: 15px 20px; /* transition douce du panneau offset */ - webkit- transition : gauche 0. 3s ; - moz- transition : gauche 0. 3s ; transition : gauche 0. 3s ; /* définir la couleur de fond du panneau */ background : #16a085 ; /* en haut d'autres éléments */ z- index : 2000 ; ) /** * Panneau de commutation à boutons * tag */ . nav-toggle ( /* positionné de manière absolue */ position : absolue ; /* par rapport au bord gauche du panneau */ gauche : 320px ; /* retrait à partir du bord supérieur du panneau */ haut : 1em ; /* rembourrage * / padding : 0, 5em ; /* déterminer la couleur de fond du switch * le plus souvent en fonction de la couleur de fond du panneau */ background : hériter ; /* couleur du texte */ color : #dadada ; /* type de curseur * / curseur : pointeur ; /* taille de la police */ police - taille : 1,2 em ; hauteur de la ligne : 1 ; /* toujours au-dessus des autres éléments de la page */ z- index : 2001 ; /* animer la couleur du texte au survol */ - webkit- transition : couleur. 25s easy- in- out ; - moz- transition : couleur . 25s easy- in- out ; transition : color . 25s easy- in- out ; ) /* définir le texte du bouton * Symbole Unicode (TRIGRAMME POUR LE CIEL) */ . nav- toggle : after ( content : "\2630" ; text- decoration : none; ) /* survolez la couleur du texte */ . nav-toggle: hover ( color: #f4f4f4; ) /** * Case à cocher masquée (case à cocher) * invisible et inaccessible :) * attribut du nom du sélecteur de la case à cocher */ [ id= "nav-toggle" ] ( position : absolue ; affichage : aucun ; ) /** * changer la position du commutateur * lorsqu'il est visualisé sur des appareils mobiles * lorsque la navigation est développée, nous le plaçons à l'intérieur du panneau */ [ id= "nav-toggle" ] : coché ~ . navigation > . nav-toggle ( gauche : auto ; droite : 2px ; haut : 1em ; ) /** * Lorsque la case est cochée, le panneau s'ouvre * utiliser la pseudo-classe : coché */ [ id= "nav-toggle" ] : coché ~ . nav ( gauche : 0 ; box- shadow : 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - moz- box- shadow : 4px 0px 20px 0px rgba(0 , 0 , 0 , 0.5 ) ; - webkit- ombre de la boîte : 4px 0px 20px 0px rgba(0 , 0 , 0 , 0. 5 ) ; débordement-y : auto ; ) /* * décaler le contenu de la page * de la taille de la largeur du panneau, * fonctionnalité facultative, pas pour tout le monde */ [ id= "nav-toggle" ] : coché ~ main > article ( - webkit- transform: translateX(320px ) ; - moz- transform: translateX(320px) ; transform: translateX(320px) ; ) /* * change le symbole de bascule, * la croix habituelle (MULTIPLICATION X), * vous pouvez utiliser n'importe quelle autre icône */ [ id= " nav-toggle" ] : coché ~ . navigation > . nav-toggle : after ( content : "\2715" ; ) /** * correction d'un bug dans Android ul ( display : block ; margin : 0 ; padding : 0 ; list- style : none ; ) . nav > ul > li ( hauteur de ligne : 2,5 ; opacité : 0 ; - webkit- transform : translateX(- 50% ) ; - moz- transform : translateX(- 50% ) ; - ms- transform : translateX(- 50% ) ; transform : translateX(- 50 % ) ; - webkit-transition : opacité . 5s . 1s, - webkit- transform . 5s . 1s ; - moz- transition : opacité . 5s . 1s, - moz- transform . 5s . 1s ; - ms- transition : opacité . 5s . 1s, - ms- transform . 5s . 1s ; transition : opacité . 5s . 1s, transformation . 5s . 1s ; ) [ id= "nav-toggle" ] : coché ~ . nav > ul > li ( opacité : 1 ; - webkit- transform : translateX(0 ) ; - moz- transform : translateX(0 ) ; - ms- transform : translateX(0 ) ; transformation : translateX(0 ) ; ) /* déterminer les intervalles d'apparition des éléments de menu */ . nav > ul > li: nth- child(2) ( - webkit- transition : opacité . 5s . 2s, - webkit- transform . 5s . 2s ; transition : opacité . 5s . 2s, transformation . 5s . 2s ; ) . nav > ul > li : nth- child(3) ( - webkit- transition : opacité . 5s . 3s, - webkit- transform . 5s . 3s ; transition : opacité . 5s . 3s, transformation . 5s . 3s ; ) . nav > ul > li: nth- child(4) ( - webkit- transition : opacité . 5s . 4s, - webkit- transform . 5s . 4s ; transition : opacité . 5s . 4s, transformation . 5s . 4s ; ) . nav > ul > li: nth- child(5) ( - webkit- transition : opacité . 5s . 5s, - webkit- transform . 5s . 5s ; transition : opacité . 5s . 5s, transformation . 5s . 5s ; ) . nav > ul > li : nth- child(6) ( - webkit- transition : opacité . 5s . 6s, - webkit- transform . 5s . 6s ; transition : opacité . 5s . 6s, transformation . 5s . 6s ; ) . nav > ul > li: nth- child(7 ) ( - webkit- transition : opacité . 5s . 7s, - webkit- transform . 5s . 7s ; transition : opacité . 5s . 7s, transformation . 5s . 7s; ) /* * * conception des liens vers les éléments de menu */ . nav > ul > li > a ( affichage : bloc en ligne ; position : relative ; remplissage : 0 ; famille de polices : "Open Sans", sans-serif ; poids de police : 300 ; taille de police : 1, 2em ; couleur : #dadada; largeur: 100%; texte- décoration: aucune; /* transition douce */ - webkit- transition: couleur. facilité 5s, remplissage. facilité 5s; - moz- transition: couleur. facilité 5s, rembourrage. facilité 5s ; transition : couleur . 5s de facilité, remplissage . 5s de facilité ; ) /** * état des liens de menu au survol */ . nav > ul > li > a : survoler, . nav > ul > li > a:focus ( couleur : blanc ; padding- left : 15px ; ) /** * lien de menu souligné */ . nav > ul > li > a: avant ( contenu : " " ; affichage : bloc ; position : absolue ; droite : 0 ; bas : 0 ; hauteur : 1px ; largeur : 100 % ; - webkit- transition : largeur 0s facilité ; transition : largeur 0s facilité ; ) . nav > ul > li > a: after ( contenu : " " ; affichage : bloc ; position : absolue ; gauche : 0 ; bas : 0 ; hauteur : 1px ; largeur : 100 % ; arrière-plan : #3bc1a0 ; - webkit-transition : largeur .5s facilité ; transition : largeur .5s facilité ; ) /** * animer le soulignement des liens * au survol */ . nav > ul > li > a : survol : avant ( largeur : 0 % ; arrière-plan : #3bc1a0 ; - webkit- transition : largeur . 5s facilité ; transition : largeur . 5s facilité ; ) . nav > ul > li > a: survol : après (largeur : 0 % ; arrière-plan : transparent ; - webkit- transition : largeur 0s facilité ; transition : largeur 0s facilité ; ) /* l'arrière-plan s'efface vers le contenu principal * tout en bloquant les éléments * Il s'agit d'une fonctionnalité controversée, si vous en avez besoin * décommentez simplement */ /* .mask-content ( affichage : bloc ; position : fixe ; haut : 0 ; gauche : 0 ; z-index : 1000 ; largeur : 100 % ; hauteur : 100 % ; couleur d'arrière-plan : rgba(0, 0, 0, 0.4); visibilité : masqué ; opacité : 0 ; ) :vérifié ~ .mask-content ( visibilité : visible ; opacité : 1 ; -webkit-transition : opacité .5s , visibilité .5s ; transition : opacité .5s, visibilité .5s ; ) */

/** * Barre de navigation latérale commutable * se retire en cliquant sur la gauche */ .nav ( /* la largeur est arbitraire, n'hésitez pas à expérimenter */ width: 320px; min-width: 320px; /* corrige et définit la hauteur du panneau au maximum */ hauteur : 100%; position: fixe; haut: 0; bas: 0; marge: 0; /* déplacer (masquer) le panneau par rapport au bord gauche de la page */ gauche: - 320px; /* padding */ padding: 15px 20px; / * transition de décalage de panneau fluide */ -webkit-transition: left 0.3s; -moz-transition: left 0.3s; transition: left 0.3s; /* définir la couleur d'arrière-plan du panneau */ arrière-plan : #16a085 ; /* au-dessus des autres éléments * / z-index : 2000 ; ) /** * Bouton bascule du panneau * tag */ .nav-toggle ( /* positionné de manière absolue */ position : absolu; /* par rapport au bord gauche du panneau */ left: 320px; /* retrait à partir du bord supérieur du panneau */ top: 1em; /* remplissage interne */ padding: 0.5em; /* définir la couleur d'arrière-plan du switch * le plus souvent en fonction de la couleur de fond du panneau */ background:heritate; /* couleur du texte */ color: #dadada; /* type de curseur */ curseur: pointeur; /* taille de la police */ font-size: 1.2em; hauteur de ligne : 1 ; /* toujours au-dessus des autres éléments de la page */ z-index: 2001; /* anime la couleur du texte au survol */ -webkit-transition: color .25s easy-in-out ; -moz-transition : couleur 0,25 s, facilité d'entrée et de sortie ; transition : couleur, entrée et sortie faciles de 0,25 s ; ) /* définir le texte du bouton * Caractère Unicode (TRIGRAM FOR HEAVEN) */ .nav-toggle:after ( content: "\2630"; text-decoration: none; ) /* survoler la couleur du texte */ .nav-toggle: survol ( color: #f4f4f4; ) /** * Case à cocher masquée (case à cocher) * invisible et inaccessible :) * attribut du nom du sélecteur de la case à cocher */ ( position : absolue ; affichage : aucun ; ) /** * changer la position de le commutateur * lors de la visualisation sur des appareils mobiles * lorsque la navigation est développée, nous le plaçons à l'intérieur du panneau */ :checked ~ .nav > .nav-toggle ( gauche : auto ; droite : 2px ; haut : 1em ; ) /** * Lorsque la case est cochée, le panneau s'ouvre * utiliser une pseudo-classe :checked */ :checked ~ .nav ( left: 0; box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); - moz-box-shadow:4px 0px 20px 0px rgba(0,0, 0, 0.5); -webkit-box-shadow:4px 0px 20px 0px rgba(0,0,0, 0.5); overflow-y: auto; ) /* * décaler le contenu de la page * de la taille de la largeur du panneau, * fonctionnalité facultative, pas pour tout le monde */ :checked ~ main > article ( -webkit-transform: translateX(320px); -moz-transform : traduireX(320px); transformer : traduireX(320px); ) /* * change le symbole à bascule, * la croix habituelle (MULTIPLICATION X), * vous pouvez utiliser n'importe quelle autre icône */ :checked ~ .nav > .nav-toggle:after ( content: "\2715"; ) /* * * Corrigeons un bug dans Android ul ( display: block; margin: 0; padding: 0; list-style: none; ) .nav > ul > li ( line-height : 2. 5 ; opacité : 0 ; -webkit-transform : traduireX(-50 %); -moz-transform : traduireX(-50 %); -ms-transform : traduireX(-50 %); transformer : traduireX(-50 %); -webkit-transition : opacité .5s .1s, -webkit-transform .5s .1s ; -moz-transition : opacité 0,5s 0,1s, -moz-transform 0,5s 0,1s ; -ms-transition : opacité 0,5s 0,1s, -ms-transform 0,5s 0,1s ; transition : opacité 0,5s 0,1s, transformation 0,5s 0,1s ; ) :checked ~ .nav > ul > li ( opacité : 1 ; -webkit-transform : traduireX(0); -moz-transform : traduireX(0); -ms-transform : traduireX(0); transformation : traduireX(0 ); ) /* déterminer les intervalles d'apparition des éléments de menu */ .nav > ul > li:nth-child(2) ( -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s; transition : opacité .5s .2s, transformation .5s .2s ; ) .nav > ul > li:nth-child(3) ( -webkit-transition : opacité .5s .3s, -webkit-transform .5s .3s ; transition : opacité .5s .3s, transformation .5s .3s; ) .nav > ul > li:nth-child(4) ( -webkit-transition : opacité .5s .4s, -webkit-transform .5s .4s ; transition : opacité .5s .4s, transformation .5s .4s ; ) .nav > ul > li:nth-child(5) ( -webkit-transition : opacité .5s .5s, -webkit-transform .5s .5s ; transition : opacité .5s .5s , transformer .5s .5s; ) .nav > ul > li:nth-child(6) ( -webkit-transition : opacité .5s .6s, -webkit-transform .5s .6s ; transition : opacité . 5s .6s, transformation .5s .6s ; ) .nav > ul > li:nth-child(7) ( -webkit-transition : opacité .5s .7s, -webkit-transform .5s .7s ; transition : opacité 0,5s 0,7s, transformation 0,5s 0,7s ; ) /** * conception des liens entre les éléments de menu */ .nav > ul > li > a ( affichage : inline-block ; position : relative ; padding : 0 ; font-family : "Open Sans", sans-serif ; font- poids : 300 ; taille de la police : 1,2 em ; couleur : #dadada ; largeur : 100 % ; décoration du texte : aucune ; /* transition douce */ -webkit-transition : couleur facilité 0,5 s, remplissage 0,5 s facilité ; -moz - transition : couleur facilité .5s, remplissage .5s facilité ; transition : couleur .5s facilité, remplissage .5s facilité ; ) /** * état des liens de menu au survol */ .nav > ul > li > a:hover, . nav > ul > li > a:focus ( couleur : blanc ; padding-left : 15px ; ) /** * lien de menu souligné */ .nav > ul > li > a:before ( contenu : " " ; display : block ; position : absolue ; droite : 0 ; bas : 0 ; hauteur : 1px ; largeur : 100 % ; -webkit-transition : largeur 0s facilité ; transition : largeur 0s facilité ; ) .nav > ul > li > a:after ( contenu : " ; affichage : bloc ; position : absolue ; gauche : 0 ; bas : 0 ; hauteur : 1 px ; largeur : 100 % ; arrière-plan : #3bc1a0 ; -webkit-transition : largeur .5s facilité ; transition : largeur . facilité 5s ) /** * animer le soulignement des * liens au survol */ .nav > ul > li > a:hover:before ( width: 0%; background: #3bc1a0; -webkit-transition: width .5s easy; transition: largeur .5s facilité ; ) .nav > ul > li > a:hover:after ( largeur : 0% ; arrière-plan : transparent ; -webkit-transition : largeur 0s facilité ; transition : largeur 0s facilité ; ) /* fondu de l'arrière-plan au principal content * dans ce cas, les éléments sont bloqués * c'est une fonctionnalité controversée, si vous en avez besoin * décommentez simplement */ /* .mask-content ( affichage : bloquer ; position : fixe ; haut : 0 ; gauche : 0 ; z -index : 1000 ; largeur : 100 % ; hauteur : 100 % ; couleur d'arrière-plan : rgba(0, 0, 0, 0.4); visibilité : masqué ; opacité : 0 ; ) : vérifié ~ .mask-content (visibilité : visible ; opacité : 1 ; -webkit -transition : opacité .5s, visibilité .5s ; transition : opacité .5s, visibilité .5s ; ) */

Comme vous le comprenez, presque toutes les valeurs de propriété sont facultatives, c'est-à-dire vous pouvez facilement modifier tous ses éléments selon vos goûts et vos couleurs, j'espère que les explications vous y aideront. Eh bien, si quelque chose ne va pas ou si certaines de mes erreurs sont découvertes, écrivez dans les commentaires, nous le découvrirons certainement et le corrigerons.

En conclusion, je voudrais vous rappeler que tous les navigateurs ne gèrent pas aussi bien les propriétés CSS3. Cette solution est certes très intéressante, mais encore plus expérimentale. Après l'avoir ajusté à vos besoins, avant de le visser solidement dans un site de production, veillez à vérifier son fonctionnement dans différents navigateurs et sur différents appareils mobiles.

Regardez à nouveau le résultat, téléchargez l'archive avec les sources, expérimentez différents paramètres et créez, créez, créez...

Dans un avenir proche, j'essaierai de raconter et de montrer comment, sur la base de cette solution, vous pouvez facilement mettre en œuvre des panneaux latéraux rétractables, avec d'autres éléments non moins importants, pour l'interaction avec les utilisateurs à bord.

Les utilisateurs ont désormais la possibilité de se familiariser avec . Tous sont présentés dans une catégorie distincte, que l'on peut trouver sur le marché TemplateMonster. Il ne devrait y avoir aucune difficulté avec eux. Ajoutez simplement votre contenu unique et vous avez terminé : vous pouvez lancer une entreprise et attirer de plus en plus de lecteurs. Il est également très important de rappeler que le texte de chaque modèle a été rédigé à la main.

Avec tout mon respect, Andrew

Habr, bonjour !

Il existe de nombreuses bonnes solutions proposées par différents spécialistes apparaissant sur Codepen, et je pense que les meilleures d'entre elles devraient être rassemblées au même endroit. Par conséquent, il y a 2 ans, j'ai commencé à enregistrer des scripts intéressants sur divers sujets sur mon ordinateur.

J'avais l'habitude de les publier dans le groupe de produits mr cloud IDE. Gefest, c'étaient des assemblages de 5 à 8 solutions. Mais maintenant, j'ai commencé à accumuler 15 à 30 scripts sur différents sujets (boutons, menus, info-bulles, etc.).

Des ensembles aussi vastes devraient être présentés à davantage de spécialistes. C'est pourquoi je les publie sur Habr. J'espère qu'ils vous seront utiles.

Dans cette revue, nous examinerons les menus à plusieurs niveaux.

Navigation horizontale plate

Belle barre de navigation avec des sous-menus apparaissant en douceur. Le code est bien structuré et utilise js. À en juger par les fonctionnalités utilisées, cela fonctionne sous ie8+.
http://codepen.io/andytran/pen/kmAEy

En-tête de navigation matérielle avec listes déroulantes alignées

Barre de liens adaptative avec sous-menu à deux colonnes. Tout est fait en CSS et HTML. Sélecteurs CSS3 utilisés qui ne sont pas pris en charge dans ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ

Menu déroulant Accordéon lisse

Menu vertical élégant avec des éléments qui s'ouvrent en douceur. Transition, le code de transformation js est utilisé.
http://codepen.io/fainder/pen/AydHJ

Menu de navigation en ligne sombre CSS pur

Barre de navigation verticale sombre avec des icônes d'ionicons. JavaScript est utilisé. Dans ie8, cela fonctionnera très probablement sans animation.
http://codepen.io/3lv3n_snip3r/pen/XbddOO

Méga menu déroulant CSS3 pur avec animation

Menu élégant avec deux formats de sortie : horizontal et vertical. Des icônes et une animation CSS3 sont utilisées. Cela aura certainement l'air terrible dans ie8, mais dans d'autres navigateurs, tout est cool.
Lien vertical : http://codepen.io/rizky_k_r/full/sqcAn/
Lien vers l'horizontale : http://codepen.io/rizky_k_r/pen/xFjqs

Menu déroulant CSS3

Menu horizontal avec de grands éléments et une liste déroulante de liens. Code propre et minimaliste sans js.
http://codepen.io/ojbravo/pen/tIacg

Menu déroulant simple et pur CSS

Menu horizontal simple mais élégant. Utilise une police géniale. Tout fonctionne en CSS et HTML, sans js. Cela fonctionnera dans ie8.
http://codepen.io/Responsive/pen/raNrEW

Méga-menu déroulant Bootstrap 3

Une excellente solution pour les boutiques en ligne. Affiche plusieurs niveaux de catégories et de grandes images (par exemple, un produit en solde). Il est basé sur boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/

Navigation à plat

Barre de navigation élégante avec sous-menu fluide. Dans les anciens navigateurs, des problèmes s'afficheront.
http://codepen.io/andytran/pen/YPvQQN

Navigation imbriquée 3D

Menu horizontal avec une animation très sympa sans js !
http://codepen.io/devilishalchemist/pen/wBGVor

Méga menu réactif - Navigation

Menu réactif horizontal. Ça a l'air bien, mais la version mobile est un peu boiteuse. CSS, HTML et JS sont utilisés.
http://codepen.io/samiralley/pen/xvFdc

Menu CSS3 pur

Menus originaux. Avec un code simple et propre sans js. À utiliser pour des effets « wow ».
http://codepen.io/Sonick/pen/xJagi

Menu déroulant CSS3 complet

Menu déroulant coloré avec un niveau d'imbrication. Les icônes de font-awesome, html et css sont utilisées.
http://codepen.io/daniesy/pen/pfxFi

Menu déroulant CSS3 uniquement

Un assez bon menu horizontal avec trois niveaux d'imbrication. Fonctionne sans js.
http://codepen.io/riogrande/pen/ahBrb

Menus déroulants

Un menu minimaliste avec l'effet original d'une liste imbriquée d'éléments apparaissant. Je suis heureux que cette solution soit également sans javascript.
http://codepen.io/kkrueger/pen/qfoLa

Menu déroulant CSS pur

Une solution primitive mais efficace. Uniquement CSS et HTML.
http://codepen.io/andornagy/pen/xhiJH

Menu Pull - Concept d'interaction avec le menu

Concept de menu intéressant pour un téléphone mobile. Je n'ai jamais rien vu de pareil auparavant. Utilise HTML, CSS et Javascript.
http://codepen.io/fbrz/pen/bNdMwZ

Créer un menu déroulant simple

Code propre et simple, pas de js. Cela fonctionnera certainement dans ie8.
http://codepen.io/nyekrip/pen/pJoYgb

Liste déroulante CSS pure

La solution n’est pas mauvaise, mais elle utilise trop de classes. Je suis content qu'il n'y ait pas de js.
http://codepen.io/jonathlee/pen/mJMzgR

Menu déroulant

Joli menu vertical avec un minimum de code javascript. JQuery n'est pas utilisé !
http://codepen.io/MeredithU/pen/GAinq

Menu déroulant CSS3

Un menu horizontal avec des légendes supplémentaires peut bien décorer votre site Web. Le code est simple et clair. Javascript n'est pas utilisé.
http://codepen.io/ibeeback/pen/qdEZjR

Belle solution avec beaucoup de code (html, css et js). 3 formats de sous-menus ont été créés. La solution est bien adaptée aux boutiques en ligne.
http://codepen.io/martinridgway/pen/KVdKQJ

Listes déroulantes du menu CSS3 (solution spéciale) !

Menu horizontal sombre avec treize (13) options d'animation ! Je vous conseille vivement de le lire, il vous sera utile au quotidien.
http://codepen.io/cmcg/pen/ofFiz

P.S.
J'espère que vous avez aimé la collection de 23 solutions. Si vous souhaitez continuer à les lire, répondez au sondage ci-dessous.
Profitez de votre travail à tous.

Dans ce didacticiel, nous allons vous montrer comment créer un menu déroulant dans la barre latérale pour rendre votre site encore plus facile à naviguer. Ce type de menu est une tendance populaire dans la conception de sites Web modernes. De nombreux sites Internet utilisent ce type de menu. Avec son aide, vous pouvez vous débarrasser du chaos sur les pages du projet, les rendre plus lisibles, en concentrant l'attention des utilisateurs sur le contenu principal.

C'est un excellent moyen d'atteindre le minimalisme sans distractions. Aujourd'hui, nous allons créer nous-mêmes un tel menu.

Pour créer un menu de navigation, jetons d'abord un œil aux paramètres :

Démo du menu d'animation

Tout d'abord, vous devez télécharger Normalize.css et configurer les styles de navigateur par défaut, en vous assurant que le menu est identique dans tous les navigateurs. Pour afficher une flèche devant les éléments de menu avec des sous-éléments, nous utiliserons FontAwesome . Pour changer de classe dans le menu, chargez jQuery et déplacez tout le code jQuery personnalisé dans script.js. Le dernier lien est la table principale du projet Web.

Icône de hamburger

L'icône du hamburger est un attribut courant de la navigation sur le site. Il est souvent créé à l'aide d'une police d'icônes telle que FontAwesome, mais dans ce didacticiel, nous ajouterons une animation et la créerons donc à partir de zéro. Notre icône hamburger est une balise span contenant trois classes div, rendues sous forme de bandes horizontales.

Les styles ressemblent à ceci :

Bouton bascule ( position : fixe ; largeur : 44 px ; hauteur : 40 px ; remplissage : 4 px ; transition : .25s ; z-index : 15 ; ) .toggle-button:hover ( curseur : pointeur ; ) .toggle-button .menu -bar ( position : absolue ; rayon de bordure : 2 px ; largeur : 80 % ; transition : 0,5 s ; ) .bouton bascule .menu-bar-top ( bordure : 4 px solide #555 ; bordure inférieure : aucune ; haut : 0; ) .toggle-button .menu-bar-middle (hauteur : 4px ; couleur d'arrière-plan : #555 ; marge-haut : 7px; marge-bas : 7px; haut : 4px; ) .toggle-button .menu-bar -bottom ( bordure : 4px solide #555 ; bordure-haut : aucune ; haut : 22px ; ) .button-open .menu-bar-top ( transformation : rotation (45deg) translation (8px, 8px) ; transition : .5s ; ) .button-open .menu-bar-middle ( transformation : traduire (230px) ; transition : .1s easy-in ; opacité : 0 ; ) .button-open .menu-bar-bottom ( transformation : rotation (-45deg) traduire(8px, -7px); transition : .5s; )

L'icône a une position fixe et ne change pas lors du défilement de la page. Il a également un z-index de 15, ce qui signifie qu’il sera toujours au-dessus des autres éléments. Se compose de trois barres, chacune partageant d’autres styles. Nous allons donc déplacer chaque barre vers la class.menu-bar. Nous déplaçons les styles restants dans des classes distinctes. La magie se produit lorsque nous ajoutons une autre classe à la balise span, qui est publique. Nous l'ajoutons en utilisant jQuery comme ceci :

$(document).ready(function() ( var $toggleButton = $(".toggle-button"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open" ); ) ); ) );

Pour ceux qui ne connaissent pas jQuery, nous initialisons une variable avec $toggleButton qui contient notre icône. Nous le stockons dans une variable sans avoir besoin de JavaScript. Ensuite, nous créons un écouteur d'événements qui écoute les clics sur l'icône. Chaque fois que l'utilisateur clique sur l'icône du hamburger, l'écouteur d'événements déclenche la fonction toggleClass(), qui active l'ouverture de class.button.

Une fois la classe .button-open ajoutée, nous pouvons l'utiliser pour modifier la façon dont les éléments sont affichés. Nous utilisons les fonctions CSS3 translation() et rotate() pour faire pivoter les barres supérieure et inférieure de 45 degrés et la barre du milieu pour se déplacer vers la droite et disparaître. Voici l'animation que vous pouvez personnaliser :

Menu de navigation déroulant

Maintenant que vous avez votre icône de hamburger, rendons-la utile et créons un menu déroulant lorsque vous cliquez dessus. Voici à quoi ressemble la disposition du menu :

Nous n’entrerons pas maintenant dans les détails de chaque style de ce menu, mais nous concentrerons plutôt sur quelques points importants. Tout d’abord, il y a la classe div et la classe .menu-wrap. Regardez ses styles :

Menu-wrap (couleur d'arrière-plan : #6968AB ; position : fixe ; haut : 0 ; hauteur : 100 % ; largeur : 280 px ; marge gauche : -280px ; taille de la police : 1em ; poids de la police : 700 ; débordement : auto ; transition : 0,25 s ; indice z : 10 ; )

La position est fixe, le menu reste donc toujours dans la même position lors du défilement de la page. Une hauteur de 100% permet au menu d'occuper tout l'espace vertical de la page. Veuillez noter que le champ marge gauche est défini sur un nombre négatif égal à la largeur du menu. Cela signifie que le menu disparaîtra de la fenêtre. Pour le rendre à nouveau visible, nous créons une autre classe bascule avec jQuery. Notre fichier JavaScript ressemblera à ceci :

$(document).ready(function() ( var $toggleButton = $(".toggle-button"), $menuWrap = $(".menu-wrap"); $toggleButton.on("click", function() ( $(this).toggleClass("button-open"); $menuWrap.toggleClass("menu-show"); ) ); ) );

Nous ajoutons une autre variable $menuWrap, qui contient le wrapper de menu. Utilisez le même gestionnaire d'événements que nous avons créé précédemment. Seulement cette fois, nous changeons deux classes : une pour le bouton et une pour le shell de menu. La valeur de la marge gauche de class.menu-show est 0, cela ajoutera un effet d'ombre.

Menu-show (marge gauche : 0 ; ombre de la boîte : 4px 2px 15px 1px #B9ADAD; )

Sous-menus et liens

Vous remarquerez peut-être que l'un des éléments de la liste a un class.menu-item-has-children, qui contient un sous-menu. De plus, juste en dessous du lien se trouve une balise span avec la classe .sidebar-menu-arrow.

span a un pseudo-élément ::after et contient une flèche FontAwesome. Par défaut, le sous-menu est masqué et ne sera visible que lorsque vous cliquerez sur la flèche. Voici comment procéder avec jQuery :

$(document).ready(function() ( var $sidebarArrow = $(".sidebar-menu-arrow"); $sidebarArrow.click(function() ( $(this).next().slideToggle(300); ) ); ) );

Lorsque nous cliquons sur la flèche, nous appelons une fonction, qui à son tour cible l'élément suivant immédiatement après le span (dans notre cas, le sous-menu) et le rend visible. La fonction que nous utilisons est slideToggle. Cela fait apparaître et disparaître un élément. La fonction dans notre exemple a un paramètre : la durée de l'animation.

Les éléments de menu de l'exemple ont un effet de survol. Il est créé en utilisant le pseudo-élément ::after. Le code ressemble à ceci :

Menu-sidebar li > a::after ( contenu : " " ; affichage : bloc ; hauteur : 0,15em ; position : absolue ; haut : 100 % ; largeur : 102 % ; gauche : 50 % ; transformation : traduire (-50 % ); image d'arrière-plan : dégradé linéaire (à droite, transparent 50,3 %, #FFFA3B 50,3 %); transition : position d'arrière-plan .2s .1s de sortie facilitée ; taille de l'arrière-plan : 200 % automatique ; ) .menu-sidebar li > a:hover::after (position d'arrière-plan : -100 % 0 ; )

Le pseudo-élément ::after contient un élément de niveau bloc au bas de chaque lien avec une largeur et une hauteur totales de 0,15em. Tout cela ressemble à un soulignement. La particularité est que nous n'appliquons pas seulement la couleur d'arrière-plan à la ligne, nous utilisons la fonction Linear-gradient() sur l'image d'arrière-plan. Bien que cette fonction soit conçue pour créer des dégradés de couleurs, nous pouvons changer la couleur en spécifiant les pourcentages souhaités.

Menu-sidebar li > a::after ( image d'arrière-plan : dégradé linéaire (à droite, transparent 50,3 %, #FFFA3B 50,3 % ; )

La moitié de la ligne ici est transparente et l’autre moitié est jaune. En faisant la taille de l'arrière-plan à 200%, nous doublons la largeur de notre bloc. Désormais la partie transparente occupe toute la largeur du lien, et la partie jaune se déplace vers la gauche et devient invisible. Nous modifions la position de l'arrière-plan au survol à -100%. La partie jaune devient désormais visible et la partie transparente est masquée.

Au lieu de la partie transparente, vous pouvez utiliser n'importe quelle autre couleur. Vous pouvez également expérimenter des dégradés.

Chacun des éléments que nous avons considérés fonctionne comme un tout. Vous pouvez créer un tel menu en utilisant n'importe quelle conception de site Web de la collection TemplateMonster. Comme vous pouvez le constater, c’est plus facile à faire que vous ne l’imaginez. Bonne chance dans la création de sites Web professionnels et conviviaux !

Site sur l'informatique

ARTICLES LIÉS