Comment construire un menu de navigation coulissant avec CSS & jQuery

Claire

il y a 6 ans

Introduction
Bouton Hamburger
Menu de navigation coulissant
Sous-menu et liens

Introduction

Dans ce tutoriel, nous allons vous montrer comment créer un menu de navigation coulissant. Le menu de navigation coulissant est une tendance courante dans la conception Web moderne, et vous pouvez voir que de nombreux sites Web préfèrent ce type de menu. Il supprime le fouillis de la page et le rend plus lisible, ce qui vous permet de mettre l’accent sur le contenu.

C'est un excellent moyen de réaliser une mise en page minimaliste pour votre site, sans distractions. Aujourd’hui, je vais vous montrer comment créer vous-même un tel menu.

Démo | Télécharger Source

Pour construire le menu de navigation, jetons un coup d’œil à la configuration du document. Tout d’abord, nous chargeons Normalize.css afin de modifier les styles de navigateur par défaut et de nous assurer que notre menu est identique dans tous les navigateurs. Nous utiliserons FontAwesome pour afficher une flèche devant l’élément de menu avec des sous-éléments. Nous chargeons également jQuery pour basculer les classes dans le menu et déplaçons tout le code jQuery personnalisé vers script.js. Le dernier lien est la feuille de style principale de notre projet.

Bouton Hamburger

Un bouton hamburger est un attribut commun de la navigation d’un site Web. Souvent, il est créé avec une police d’icônes, telle que FontAwesome, mais dans ce tutoriel, j’aimerais y ajouter une animation, nous allons donc la construire à partir de rien. Fondamentalement, notre bouton est une étendue contenant trois div affichés sous forme de barres horizontales.

<span class="toggle-button">
     <div class="menu-bar menu-bar-top"></div>
     <div class="menu-bar menu-bar-middle"></div>
     <div class="menu-bar menu-bar-bottom"></div>
</span>

Les styles se présentent comme suit :

.toggle-button {
  position: fixed;
  width: 44px;
  height: 40px;
  padding: 4px;
  transition: .25s;
  z-index: 15;
}
.toggle-button:hover {
  cursor: pointer;
}
.toggle-button .menu-bar {
  position: absolute;
  border-radius: 2px;
  width: 80%;
  transition: .5s;
}
.toggle-button .menu-bar-top {
  border: 4px solid #555;
  border-bottom: none;
  top: 0;
}
.toggle-button .menu-bar-middle {
  height: 4px;
  background-color: #555;
  margin-top: 7px;
  margin-bottom: 7px;
  top: 4px;
}
.toggle-button .menu-bar-bottom {
  border: 4px solid #555;
  border-top: none;
  top: 22px;
}
.button-open .menu-bar-top {
  transform: rotate(45deg) translate(8px, 8px);
  transition: .5s;
}
.button-open .menu-bar-middle {
  transform: translate(230px);
  transition: .1s ease-in;
  opacity: 0;
}
.button-open .menu-bar-bottom {
  transform: rotate(-45deg) translate(8px, -7px);
  transition: .5s;
}

Le bouton a une position fixe et ne bouge pas lorsque vous faites défiler la page. Il a également un indice z de 15, de sorte qu'il reste toujours au-dessus des autres éléments et les chevauche. Le bouton est composé de trois barres. Chaque barre partage des styles les uns avec les autres, je les ai donc transférés dans la classe. .menu-bar . Les autres styles sont déplacés dans des classes séparées. La «magie» se produit lorsque nous ajoutons une autre classe à la classe conteneur, qui est .button-open. Nous l'ajoutons avec l'aide de 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, laissez-moi vous expliquer ce qui se passe ici. Tout d'abord, nous initialisons une variable appelée $toggleButton, qui contient notre bouton. Nous le stockons dans une variable, de sorte que JavaScript n’a pas besoin de chercher dans notre document ni de chercher le bouton chaque fois que nous le cliquons. Ensuite, nous créons un écouteur d'événement qui écoute les clics sur le bouton. Chaque fois que le bouton est cliqué, l'écouteur d'événements déclenche la fonction toggleClass() qui bascule la classe .button-open.

Lorsque la classe .button-open est ajoutée, nous pouvons l’utiliser pour changer la façon dont les éléments sont affichés. Nous utilisons les fonctions CSS3 translate() et rotate() pour faire pivoter les barres supérieure et inférieure à 45 degrés, et la barre centrale dévie vers la droite et disparaît. Vous pouvez jouer avec le bouton et changer ses propriétés dans la démo de Codepen.

Menu de navigation coulissant

Maintenant que notre bouton est créé, rendons-le utile et créons le menu qui se coulisse lorsque vous cliquez sur le bouton. Voici à quoi ressemble le balisage du menu :

<div class="menu-wrap">
    <div class="menu-sidebar">
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Blog</a></li>
            <li class="menu-item-has-children"><a href="#">Click The Arrow</a>
                <span class="sidebar-menu-arrow"></span>
                <ul class="sub-menu">
                    <li><a href="#">Alignment</a></li>
                    <li><a href="#">Markup</a></li>
                    <li><a href="#">Comments</a></li>
                </ul>
            </li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Get In Touch</a></li>
        </ul>           
    </div>
</div>

Je ne détaillerai pas chaque style de ce menu, je me concentrerai plutôt sur quelques points importants. Tout d’abord, c’est la div avec classe .menu-wrap . Regardez les styles :

.menu-wrap {
    background-color: #6968AB;
    position: fixed;
    top: 0;
    height: 100%;
    width: 280px;
    margin-left: -280px;
    font-size: 1em;
    font-weight: 700;
    overflow: auto;
    transition: .25s;
    z-index: 10;
}

La position est fixe, le menu reste donc toujours au même endroit lorsque la page est défilée. La hauteur 100% permet au menu d’occuper tout l’espace vertical de la page. Notez que la marge gauche est définie sur un nombre négatif, ce qui correspond à la largeur du menu. Cela fait disparaître le menu de la fenêtre. Afin de le rendre à nouveau visible, nous créons une autre classe toggler avec jQuery. Notre fichier JavaScript ressemblerait à 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 et utilise le même gestionnaire d’événements pour le bouton que nous avons créé précédemment. Seulement cette fois, nous basculons entre deux classes, une pour le bouton et une pour le wrapper du menu. La classe .menu-show définit la marge gauche sur 0 et ajoute un effet d'ombre à la boîte.

.menu-show {
    margin-left: 0;
    box-shadow: 4px 2px 15px 1px #B9ADAD;
}

Sous-menu et liens

Vous remarquerez peut-être que l’un des éléments de la liste a la classe .menu-item-has-children et contient un sous-menu. Aussi, juste après le lien, il y a une période avec la classe .sidebar-menu-arrow.

<li class="menu-item-has-children"><a href="#">Click The Arrow</a>
<span class="sidebar-menu-arrow"></span>
    <ul class="sub-menu">
    <!-- List items -->
    </ul>
</li>

Le span a un pseudo-élément ::after qui contient une flèche FontAwesome. Par défaut, le sous-menu est masqué et ne sera visible que si vous cliquez sur la flèche. Voici comment nous le faisons avec jQuery :

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

Lorsque nous cliquons sur la flèche, une fonction est appelée, elle cible l’élément suivant juste après l’étendue (dans notre cas, c’est le sous-menu) et le rend visible. La fonction que nous utilisons est slideToggle. Cela fait apparaître et disparaître un élément par un mouvement de glissement. La fonction dans notre exemple a un paramètre, qui est la durée de l'animation.

Enfin, les éléments de menu de notre démo ont un effet de survol. Il est créé en utilisant un pseudo-élément ::after. Le code se présente comme suit :

.menu-sidebar li > a::after {
    content: "";
    display: block;
    height: 0.15em;
    position: absolute;
    top: 100%;
    width: 102%;
    left: 50%;
    transform: translate(-50%);
    background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
    transition: background-position .2s .1s ease-out;
    background-size: 200% auto;
}
.menu-sidebar li > a:hover::after {
    background-position: -100% 0;
}

Le pseudo-élément ::after contient un élément de niveau de bloc positionné de manière absolue au bas de chaque lien, avec une hauteur de 0,15 em et une largeur totale. En d’autres termes, c’est notre soulignement. Ce qui est spécial ici, c'est que nous n'appliquons pas simplement la couleur de fond à la ligne, nous utilisons la fonction linear-gradient() sur l'image de fond. Bien que cette fonction soit destinée à la création de dégradés de couleurs, nous pouvons effectuer un changement de couleur brusque en spécifiant les pourcentages.

.menu-sidebar li > a::after {
  background-image: linear-gradient(to right, transparent 50.3%, #FFFA3B 50.3%);
}

Ici, une moitié de la ligne est transparente et une autre moitié est jaune. En faisant 200% de la taille de l’arrière-plan, nous doublons la largeur de notre bloc, de sorte que la partie transparente occupe toute la largeur du lien et que l’autre, la partie jaune, soit déplacée vers la gauche et ne soit pas visible. En survol, nous modifions la position d'arrière-plan sur -100%, ce qui déplace notre ligne à double taille. La partie jaune devient visible et la partie transparente est maintenant masquée.

Au lieu de la partie transparente, vous pouvez utiliser n'importe quelle couleur. Cela créerait une illusion de la ligne remplie par une autre couleur, mais en réalité, il s’agit d’une ligne bicolore. Vous pouvez également expérimenter avec des dégradés au lieu de faire un changement de couleur brusque comme nous l'avons fait ici.

Allez-y et regardez ce que nous avons construit. Chacun des éléments que nous avons examinés séparément agissent ensemble dans leur ensemble. Aussi, n'hésitez pas à télécharger le code source de ce tutoriel et à l'utiliser pour vos propres projets.

Démo | Télécharger Source

Si vous avez des questions, faites-le moi savoir dans les commentaires ci-dessous.