Formateur

Coder comme un PRO

Coder comme un PRO

Formateur Web depuis 11 ans dans la filière Webdesign, je vous propose de booster vos connaissances pour réaliser des sites web.

Cours par Webcam

Matières abordées

Niveaux

Contact

Vous êtes intéressez par la formation?
Contactez-moi.

Facebook
Twitter
LinkedIn

Créer un menu latéral animé

Idéal pour les formats mobiles, voici un menu latéral animé facile à faire dont l’ouverture est déclenchée par Javascript.

Menu latéral animé
Menu latéral animé

Commençons par la structure HTML :

<!-- Navigation -->
<nav id="slide-menu">
  <ul>
    <li class="timeline"><i class="fa fa-home" aria-hidden="true"></i> Accueil</li>
    <li class="events"><i class="fa fa-info-circle" aria-hidden="true"></i> A propos</li>
    <li class="calendar"><i class="fa fa-calendar-o" aria-hidden="true"></i> Calendar</li>
    <li class="sep settings"><i class="fa fa-picture-o" aria-hidden="true"></i> Photos</li>
    <li class="logout"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Contact</li>
  </ul>
</nav>
<!-- Contenu de la page -->
<div id="content">
  <div class="menu-trigger"><i class="fa fa-bars" aria-hidden="true"></i></div>
  <h1>Menu bar pour mobile</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consectetur modi omnis aut illo, officiis numquam rerum. Doloribus dignissimos quo quis, vero cumque provident quae officia error, unde ducimus reiciendis!</p>
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consectetur modi omnis aut illo, officiis numquam rerum. Doloribus dignissimos quo quis, vero cumque provident quae officia error, unde ducimus reiciendis!</p>
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consectetur modi omnis aut illo, officiis numquam rerum. Doloribus dignissimos quo quis, vero cumque provident quae officia error, unde ducimus reiciendis!</p>
</div>

Le menu hamburger (ou menu bar) est édité par le code  HTML

<div class="menu-trigger"><i class="fa fa-bars" aria-hidden="true"></i></div>

Les icônes sont importées par une police de caractère nommée font-awesome. Cette appel se fait via le fichier CSS :

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);

body {
  margin: 0;
  background: #556270;
  color: #353d46;
  font: 18px/27px 'Oxygen', sans-serif;
  overflow-x: hidden;
}
h1, h2, h3 {
  color: #FF6B6B;
  margin: 0 0 27px;
  line-height: 1em;
}
/*
Menu
*/
nav#slide-menu {
  position: fixed;
  overflow-y: auto;
  top: 0;
  left: -100px;
  bottom: 0;
  display: block;
  float: left;
  width: 100%;
  max-width: 284px;
  height: 100%;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
nav#slide-menu > ul {
  display: block;
  margin: 40px;
  padding: 0;
  list-style: none;
  opacity: 0.5;
  -moz-transition: all 100ms;
  -webkit-transition: all 100ms;
  transition: all 100ms;
}
nav#slide-menu > ul li {
  color: #dfe5eb;
  padding: 6px 0;
  cursor: pointer;
}
nav#slide-menu > ul li:hover {
  color: #59e9df;
}
nav#slide-menu > ul li.sep {
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px solid #6b7b8d;
}
body.menu-active nav#slide-menu {
  left: 0px;
}
body.menu-active nav#slide-menu ul {
  left: 0px;
  opacity: 1;
}

/*
Contenu
*/
div#content {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 60px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fcfeff;
  border-radius: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-shadow: -3px 0 6px #4a5562;
  -webkit-box-shadow: -3px 0 6px #4a5562;
  box-shadow: -3px 0 6px #4a5562;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
div#content div.menu-trigger {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 1px 7px;
  background: #dfe5eb;
  cursor: pointer;
  border-radius: 5px;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  text-align: center;
}
div#content div.menu-trigger:hover {
  background: #556270;
}
div#content div.menu-trigger:hover:before {
  color: #fcfeff;
}
body.menu-active div#content {
  left: 284px;
}

L’animation du menu qui slide quand on clique sur l’icône bar se fait avec le CSS3. Le bloc menu #slide-menu et le bloc contenu #content sont en position fixed. On applique sur ces sélecteurs la propriété transition qui permet de modifier les valeurs de tous les attributs de manière progressive.

transition: all 300ms;

Pour déplacer le menu et le contenu principal vers la droite ou la gauche, on modifie leur valeur left :

– pour le menu

body.menu-active nav#slide-menu ul {
  left: 0px;
  opacity: 1;
}

– pour le contenu

body.menu-active div#content {
  left: 284px;
}

Vous remarquez que ces changements sont appliqués si le body possède la classe .menu-active. Et c’est Javascript qui va ajouter ou supprimer cette classe.

/*
  Slidemenu
*/
(function() {
  var $body = document.body
  , $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

  if ( typeof $menu_trigger !== 'undefined' ) {
    $menu_trigger.addEventListener('click', function() {
      $body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';
    });
  }

})();

Pour éviter les conflits de nommage de variable avec les autres scripts existant, le code est placé dans une fonction anonyme.

Le code Javascript doit être placé après le contenu HTML (avant la fermeture de la balise <body> ).

Vous pouvez bien-sur personnaliser ce code pour l’adapter à votre graphisme.. Visualisez sur Codepen le résultat.

See the Pen
Menu bar
by salsacobo (@salsacobo)
on CodePen.

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »

3 réponses

  1. Bonjour,
    Ce script est vraiment ce que je cherchais pour mon site par son graphisme et son elegance, seulement il ne fonctionne pas… le menu ne se ferme pas et donc ne s’ouvre pas… pouvez vous me dire d’ou vient le problème que je le corrige cela… merci beaucoup et bonne journée

  2. Re-Bonjour,
    Je vous prie de m’excuser, cela venait de moi, j’avais mis le javascript avant, pas a la fin du script… cela marche mieux comme cela évidement… merci ! bonne journée a vous

Laisser un commentaire

MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.