Share
Dans ce tutoriel, nous allons passer en revue une méthode simple mais efficace pour créer un menu hors-texte avec HTML, CSS et JavaScript..
Pour avoir une première idée de ce que nous allons construire, jetez un œil à la démo de CodePen (consultez la version plus grande pour une meilleure expérience):
Remarque: Ce tutoriel ne se concentrera pas sur la manière de rendre le menu hors-toile accessible ou réactif; ces étapes seraient donc certainement valides.
Notre balisage est constitué de deux éléments d'emballage:
Accentsconagua
.haut-bannière élément.top-nav élémentVoici le code HTML:
Avec le balisage prêt, examinons ensuite les styles les plus importants requis pour notre menu..
Remarque: Pour des raisons de lisibilité, ce code CSS n'est pas optimisé. Vous remarquerez les propriétés en double que vous voudrez peut-être supprimer dans votre propre version..
le .haut-bannière L'élément ressemble à ceci:
En ce qui concerne ses styles, nous procédons comme suit:
.menu-wrapper élément.Voici les styles dont nous aurons besoin pour réaliser tout cela:
.top-banner display: flex; largeur: calc (100% - 150px); hauteur: 100vh; transformer: translateX (150px); fond: url (IMAGE_PATH) centre non-répété / corrigé; .top-banner-overlay display: flex; direction de flexion: colonne; justifier-contenu: centre; largeur: 350px; rembourrage: 20px; transition: transformer .7s; Couleur blanche; arrière-plan: rgba (0, 0, 0, 0,7);
le .top-nav L'élément ressemble à ceci:
Dans ce cas, nous ferons ce qui suit:
.menu fixe élément..menu-wrapper élément par défaut. Pour ce faire, nous ne lui donnons pas une valeur de propriété telle que affichage: aucun. En fait, nous utilisons le Traduire() fonction pour le déplacer 200px vers la gauche. Gardez à l'esprit que la largeur de l'élément est de 350 px, de sorte qu'une partie de celui-ci se trouve toujours dans la fenêtre d'affichage. Cependant, il n’est pas visible car l’élément est placé sous le .menu fixe élément.Regardez les styles CSS correspondants ci-dessous:
.top-nav .menu-wrapper position: fixed; en haut: 0; gauche: 0; en bas: 0; largeur: 350px; rembourrage: 20px; transformer: translateX (-200px); transition: transformer .7s; arrière-plan: # B1FFE5; .top-nav .menu-wrapper .menu opacity: 0; transition: opacité .4s; .top-nav .fixed-menu position: fixed; en haut: 0; gauche: 0; en bas: 0; affichage: flex; direction de flexion: colonne; largeur: 150px; rembourrage: 20px; fond: aigue-marine;
À ce stade, nous allons utiliser un code JavaScript simple pour manipuler l'état du menu hors-zone..
Décrivons les actions nécessaires:
.menu ouvert Cliquez sur le bouton, le menu devrait apparaître avec un bel effet de glisser et la superposition doit être poussée simultanément vers la droite. Facultativement, nous pouvons faire beaucoup plus de choses pendant cet état. Dans notre exemple, nous ajoutons une ombre de boîte à la ::avant pseudo-élément de la superposition et faire apparaître la liste de menus à l'aide d'un effet de fondu..menu-fermer cliquez sur le bouton, le menu devrait disparaître avec un bel effet coulissant, et la superposition doit être poussée simultanément vers la gauche.Voici le code JavaScript qui implémente ce comportement:
const menuOpen = document.querySelector (". top-nav .menu-open"); const menuClose = document.querySelector (". top-nav .menu-close"); const menuWrapper = document.querySelector (". top-nav .menu-wrapper"); const topBannerOverlay = document.querySelector (". top-banner-overlay"); function toggleMenu () menuOpen.addEventListener ("cliquez sur", () => menuWrapper.classList.add ("est ouvert"); topBannerOverlay.classList.add ("est déplacé");); menuClose.addEventListener ("clic", () => menuWrapper.classList.remove ("est ouvert"); topBannerOverlay.classList.remove ("est déplacé");); toggleMenu ();Et ci-dessous, vous trouverez les styles CSS associés:
.top-banner-overlay.is-move transform: translateX (350px); .top-banner-overlay.is-move :: before content: "; position: absolute; haut: 0; bas: 0; droite: 100%; largeur: 20px; box-shadow: 0 0 10px noir; .top-nav .menu-wrapper.is-open transform: translateX (150px); .top-nav .menu-wrapper.is-open .menu opacity: 1; transition-delay: .6s;
Cette démo ne fonctionnera bien que sur les navigateurs de bureau. Les appareils mobiles nécessiteront une mise en page différente, mais cela dépasse le cadre de ce didacticiel. Comme d'habitude, nous utilisons Babel pour compiler le code ES6 en ES5.
Le seul petit problème que j'ai rencontré lors du test est la modification du rendu du texte qui survient lorsque la superposition est animée. Bien que j'aie essayé diverses approches proposées dans différents threads Stack Overflow, je n'ai pas été en mesure de trouver une solution simple pour tous les systèmes d'exploitation et tous les navigateurs. Alors gardez à l'esprit que vous pourriez rencontrer de petits problèmes de rendu des polices lorsque la superposition est animée.
C'est ça, les gars! Nous avons réussi à créer un menu utile utile avec un code relativement simple..
J'espère que vous avez apprécié le résultat final et que vous l'utiliserez comme source d'inspiration pour créer des menus hors-pistes encore plus puissants. Et bien sûr, si vous en construisez, n'oubliez pas de les partager avec nous!
