Création d'un menu latéral Swipeable pour le Web

Aujourd'hui, je vais partager une expérience pour reproduire le comportement du menu latéral, semblable à ce que vous avez vu sur les applications smartphones, mais ce tutoriel est pour le web. Je vais vous guider à travers chaque étape de la structuration de votre mise en page et en ajoutant les mouvements de glissement pour ouvrir / fermer le menu, utilisable sur les ordinateurs de bureau et les smartphones.

Création d'un menu latéral Swipeable pour le Web

Note: Ce tutoriel va nécessiter la bibliothèque jQuery , alors assurez-vous d'inclure la dernière bibliothèque jQuery dans votre page HTML avant de poursuivre.

1. Construction

HTML:

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
            <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div class="main-content">
    </div>
</div>

CSS:

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
}

#sidebar {
    position: absolute;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
   -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}

Dans la première étape, nous mettons sur pied la structure du menu de gauche que nous finirons cacher à gauche. J'ai ajouté quelques modèles de base pour la démo, alors n'hésitez pas à changer le look and feel de votre menu latéral. J'ai aussi ajouté un vide div appelé main-content . Cette div sera le conteneur pour les éléments que vous souhaitez afficher sur cette page. Nous remplirons cette place à l'étape suivante.

Démo

2. Création d'un menu latéral de base

HTML:

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div class="main-content">
        <a href="#" data-toggle=".container" id="sidebar-toggle">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="content">
            <h1>Creating Swipeable Side Menu For the Web</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
    </div>
</div>

CSS:

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}

.container.open-sidebar {
    left: 240px;
}

#sidebar {
    position: absolute;
    left: -240px;
    background: #DF314D;
    width: 240px;
    height: 100%;
    box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;   
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;   
}

JS:

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
});

Maintenant, nous nous cachons dans le menu latéral à gauche avec position:relative et left: -240px (le nombre est équivalent à la largeur de la barre latérale). J'ai ajouté un bouton et un script jQuery qui nous permettra d'activer le menu latéral avec un clic en basculant une classe open-sidebar sur le contenant à la fois la barre latérale et le principal contenu.
Je puis simplement déplacer tout le conteneur vers la gauche par 240px rendant dans le menu de gauche apparaît. Si l'utilisateur clique sur le bouton encore une fois, le script jQuery va supprimer la classe et le menu latéral va disparaître. Afin de rendre le menu latéral animer comme s'il volait en partant de la gauche, j'ai également ajouté un style de transition pour créer une expérience équivalente à ce que vous obtenez sur les applications de votre smartphone.
Maintenant, nous avons le menu latéral de base qui peut activé par un clic de souris.

Démo

3. Rendre Swipeable

HTML:

<div class="container">
    <div id="sidebar">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Explore</a></li>
            <li><a href="#">Users</a></li>
                <li><a href="#">Sign Out</a></li>
        </ul>
    </div>
    <div class="main-content">
        <div class="swipe-area"></div>
        <a href="#" data-toggle=".container" id="sidebar-toggle">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </a>
        <div class="content">
            <h1>Creating Swipeable Side Menu For the Web</h1>
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        </div>
    </div>
</div>

CSS:

body, html {
    height: 100%;
    margin: 0;
    overflow:hidden;
    font-family: helvetica;
    font-weight: 100;
}
.container {
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    -webkit-transition:  left 0.4s ease-in-out;
    -moz-transition:  left 0.4s ease-in-out;
    -ms-transition:  left 0.4s ease-in-out;
    -o-transition:  left 0.4s ease-in-out;
    transition:  left 0.4s ease-in-out;
}
.container.open-sidebar {
    left: 240px;
}

.swipe-area {
    position: absolute;
    width: 50px;
    left: 0;
top: 0;
    height: 100%;
    background: #f3f3f3;
    z-index: 0;
}
#sidebar {
    background: #DF314D;
    position: absolute;
    width: 240px;
    height: 100%;
    left: -240px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar ul li {
    margin: 0;
}
#sidebar ul li a {
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 100;
    color: white;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid #C9223D;
    -webkit-transition:  background 0.3s ease-in-out;
    -moz-transition:  background 0.3s ease-in-out;
    -ms-transition:  background 0.3s ease-in-out;
    -o-transition:  background 0.3s ease-in-out;
    transition:  background 0.3s ease-in-out;
}
#sidebar ul li:hover a {
    background: #C9223D;
}
.main-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
}
.main-content .content{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
padding-left: 60px;
width: 100%;
}
.main-content .content h1{
    font-weight: 100;
}
.main-content .content p{
    width: 100%;
    line-height: 160%;
}
.main-content #sidebar-toggle {
    background: #DF314D;
    border-radius: 3px;
    display: block;
    position: relative;
    padding: 10px 7px;
    float: left;
}
.main-content #sidebar-toggle .bar{
     display: block;
    width: 18px;
    margin-bottom: 3px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;   
}
.main-content #sidebar-toggle .bar:last-child{
     margin-bottom: 0;   
}

JS:

$(document).ready(function() {
  $("[data-toggle]").click(function() {
    var toggle_el = $(this).data("toggle");
    $(toggle_el).toggleClass("open-sidebar");
  });
    
});

$(".swipe-area").swipe({
    swipeStatus:function(event, phase, direction, distance, duration, fingers)
        {
            if (phase=="move" && direction =="right") {
                 $(".container").addClass("open-sidebar");
                 return false;
            }
            if (phase=="move" && direction =="left") {
                 $(".container").removeClass("open-sidebar");
                 return false;
            }
        }
});

La partie la plus délicate de ce tutoriel est de rendre le menu latéral swipeable sur les deux smartphones navigateurs et les navigateurs Web. A ce stade, nous aurons besoin d'inclure un grand plugin tiers appelé TouchSwipe construit par Matt Bryson qui gérera l'action geste de balayage pour nous. Assurez-vous d'inclure ce plugin pour votre fichier html avant de continuer.
Maintenant que nous avons un moyen de détecter l'action de glisser / traînée, nous allons l'utiliser pour activer le menu de gauche. Le problème que j'ai eu auparavant, c'est que j'ai appliqué l'action de glisser à la page entière et cela s'est avéré être un problème sur smartphones parce que quand vous avez, vous voulez balayez vers la gauche / droite pour naviguer. En appliquant l'action de glisser à toute la page, à chaque fois que l'utilisateur veut naviguer vers la gauche / droite, il activera le menu latéral par accident.
Comme cela était inacceptable, j'ai ajouté un div vide avec un nom de classe swipe-area pour déterminer la zone swipeable (J'ai souligné ce domaine dans le but de ce tutoriel). Cette zone swipeable est positionné sur le bord gauche de la page afin que l'utilisateur sera en mesure d'activer le menu latéral en glissant à droite du bord gauche de leur écran. Cela résout le problème de l'activer par accident lors de la navigation.
Dans notre JS ci-dessus, nous sommes détection d'une action de glisser à l'aide de swipe() fonction fournie par le plugin TouchSwipe. Nous détectons des 2 parties de l'action de balayage, le mouvement et la direction. Nous ajoutons simplement une classe «open-sidebar» pour activer le menu de gauche lorsque le curseur / doigt se déplace vers la droite. Nous enlevons la classe si le curseur / doigt déplacé dans la direction opposée.
Dans mon expérience, cela fonctionne parfaitement sur les smartphones, mais ne fonctionne pas bien sur les navigateurs de bureau parce que quand nous nous traînons les curseurs, les navigateurs vont activer l'outil de sélection de texte qui écrase notre action de glisser. Nous ne voulons pas cela, et c'est pourquoi nous avons return false après nous ajouter / supprimer le "open-sidebar" avant de faire glisser / glisser. En retournant faux tout de suite, il empêche l'outil de sélection de texte pour être activé par défaut.

Démo Télécharger