Créer un menu Slide-Out

Feb 2, 2026

Comment

Un excellent moyen d'améliorer la expérience utilisateur sur votre site consiste à ajouter un menu de glissière; Cela crée une manière accrocheuse pour les utilisateurs de trouver ce qu'ils veulent - partout où ils peuvent être sur la page - et signifie qu'ils ne doivent pas faire défiler jusqu'à la valeur de navigation supérieure.

Nous aimons particulièrement le menu coulissant sur le site pour Crème glacée Cosmétiques , conçu par Hioka Hasegawa (Si vous voyez des sites que vous aimez, assurez-vous de les enregistrer dans stockage en ligne pour l'inspiration). Lisez-le pour savoir comment reproduire cet effet de glissière sur votre propre site Web. Viette de créer un site Web qui fait une impression? La droite hébergement Web service ou Générateur de site Web fera exactement ça.

01. Initiation du document

La première étape consiste à définir le document de page. Ceci est constitué d'un conteneur HTML représentant la page Web, qui contient la section de la tête et du corps. Bien que la section principale soit utilisée pour charger les ressources externes CSS et JavaScript, la section du corps est utilisée pour stocker le contenu de la page visible créé à l'étape 2.

 & lt;! Doctype HTML & GT;
& lt; html & gt;
& lt; tête & gt;
& lt; titre & gt; glisser le menu & lt; / titre & gt;
& lt; link rel = "stylesheet" type = "text / css" media = "écran" href = "styles.css" / & gt;
& lt; script src = "code.js" & gt; & lt; / script & gt;
& lt; / tête & gt;
& lt; corps & gt;
*** ÉTAPE 2 ICI
& lt; / corps & gt;
& lt; / html & gt;

02. Contenu de la page

Le contenu de la page consiste en un titre de la rubrique, ainsi qu'un conteneur de navigation. Cette navigation stocke une série de liens et a été attribué à un attribut «Data-Action». C'est cet attribut qui sera utilisé par le JavaScript et le CSS pour appliquer le style et la fonctionnalité sur le conteneur et ses éléments.

 & lt; h1 & gt; glisser le menu & lt; / h1 & gt;
& lt; NAV Data-Action = "Développer" & GT;
  & lt; span & gt; & amp; # 9776; & lt; / span & gt;
  & lt; un href = "#" & gt; Page 1 & LT; / A & GT;
  & lt; un href = "#" & gt; Page 2 & LT; / A & GT;
  & lt; un href = "#" & gt; Page 3 & LT; / A & GT;
& lt; / NAV & GT;

03. Initiation CSS

Le HTML est maintenant terminé, créez donc un nouveau fichier appelé «styles.css» pour lancer le formatage de la présentation. Cette étape définit le document HTML et son corps pour ne pas avoir d'espacement des frontières visibles, ainsi qu'un fond noir. La couleur est réglée sur blanc comme la couleur par défaut du texte de contenu à hériter.

 HTML, Corps {
  bloc de visualisation;
  largeur: 100%;
  Hauteur: 100%;
  Contexte: #000;
  Couleur: #fff; }

04. Configuration de la navigation

La navigation doit être affichée avec un positionnement fixe et avec un index z au-dessus de tout afin de pouvoir préciser l'écran complet, quel que soit l'endroit où l'utilisateur a défilé. Il est initialement positionné hors de vue sur le côté gauche de la fenêtre visible de l'écran. Une règle de transition est appliquée pour animer tout changement sur une durée d'une seconde.

 NAV {
  bloc de visualisation;
  Position: fixe;
  Dimensionnement de la boîte: Border-Box;
  TOP: 0;
  à gauche: -100vw;
  z-index: 9999;
  rembourrage: .5em 1em .5em 1em ;;
  largeur: 100vw;
  Hauteur: 100vh;
  Texte-Aligner: Centre;
  Contexte: rouge;
  Transition: tous les 1; }

05. NAV Ouvrir et icon

La position gauche de la navigation est définie sur zéro lorsqu'une classe «ouverte» a été appliquée, déclenchant la transition animée définie à l'étape précédente. Le premier enfant de la navigation est l'icône Développer, qui utilise un positionnement fixe pour toujours rester visible au centre du côté gauche de l'écran.

 nav.open {
  à gauche: 0;
}
NAV *: premier enfant {
  Position: fixe;
  Rembourrage: 1em;
  curseur: pointeur;
  à gauche: 0;
  TOP: 50VH;
  clarifier les deux; }

06. Liens de navigation

Chaque liaison d'ancrage à l'intérieur du conteneur de navigation est définie pour être quatre fois la taille du texte par défaut. Leur couleur est réglée sur le noir, avec une marge appliquée à leur sommet pour garantir l'espacement vertical est visible. Définir leur affichage comme «bloc» rend chaque lien apparaît automatiquement à être empilés verticalement.

 Nav A {
  bloc de visualisation;
  Taille de la police: 4EM;
  Couleur: # 000;
  Font-famille: Arial;
  Texte-Décoration: Aucun;
  Marge-top: .2em;
}

07. JavaScript Auditeur

Créez un nouveau fichier appelé 'code.js'. Cette étape attend jusqu'à ce que la page soit chargée, sur laquelle elle recherche le premier enfant de toutes les navigations avec l'attribut "Data-Action" défini sur "Développer". Ce premier enfant, étant l'icône ouverte, dispose d'un auditeur d'événement "Click 'appliqué sur lequel bascule l'élément à avoir ou non une classe" ouverte "appliquée.

 fenêtre.addeventlistener ("Charge", fonction () {
  var nœuds = document.Queryselectorallall ('NAV [Data-Action = "Développer"] *: Premier-enfant');
  pour (var i = 0; i & lt; nœuds.length; i ++) {
  nœuds [i].addeventlistener ("Cliquez sur", fonction () {
  if (this.parentnode.classname == "Ouvrir") this.parentnode.classname = "";
  sinon cela.parentnode.classname = "ouvert";
  });
  }
});
***

Cet article a été publié à l'origine dans le numéro 274 de Creative Web Design Magazine Web Designer. Achetez le numéro 274 ici ou Abonnez-vous à Web Designer ici .

Articles Liés:

Tendances de navigation sur le Web
10 règles de grande expérience utilisateur
Ajouter des indications visuelles à votre site

Créer un menu Slide-Out

01. Initiation du document

02. Contenu de la page

03. Initiation CSS

04. Configuration de la navigation

05. NAV Ouvrir et icon

06. Liens de navigation

07. JavaScript Auditeur

Comment - Most Popular Articles

Comment étirer une toile et mettre en place des peintures à l'huile

Le Guide essentiel pour désamorcer dans l'art

21 façons d'améliorer la productivité avec NPM

Créer un intérieur accueillant à l'aide de la ligne d'art

Utilisez Marmoset Toolbag pour présenter des modèles en VR

Simulez une transformation de coureur de fantôme

Convertir une photo en un ensemble VR

Introduction aux tests de convivialité

Catégories