"Pop-up bar" en CSS3 et HTML5 classList API

Attention ! Cet article a plus de 1 an (3349 jours), ce qui signifie qu'il n'est pas forcément à jour !

En naviguant sur le web, j’ai vu une panoplie de “Pop-up bars” souvent lourdement animés en Jquery, Mootools, etc.

J’ai donc décidé de faire un “Pop-up bar” le plus simple possible. Il est animé en CSS3 en utilisant la propriété transition. Pour que ces transitions s’effectuent, j’ai mis du Vanilla Javascript (ce qui permet de l’utiliser partout sans entrer en conflit avec une librairie Javascript) pour ajouter et enlever une classe sur l’élément “popup”.

MO

ClassList

Pour éviter les librairies Javascript, j’ai utilisé l’objet classList, ce qui permet aux développeurs d’ajouter, enlever et d’alterner des classes CSS, ainsi que de vérifier si un élément possède une classe CSS.

Vous devez garder en tête que ce démo est surtout pour jouer avec classList que pour une utilisation en production. ClassList fait parti du HTML5 et selon caniuse.com, il est encore en “working draft”. On peut voir aussi sur le site qu’il est supporté à partir de la version 10 pour Internet Explorer. Il existe des pluggins Javascript pour la compatibilité du classList, ou vous pouvez tout simplement utiliser une librairie Javascript, mais ici, ce n’était pas mon but.

Ajouter une classe CSS

myDiv.classList.add('myCssClass');

Enlever une classe CSS

myDiv.classList.remove('myCssClass');

Alterner une classe CSS

myDiv.classList.toggle('myCssClass');

Vérifier si l’élément contient une classe.

myDiv.classList.contains('myCssClass'); //returns true or false

HTML

 <div class="popup show"> 
 <a href="#" class="hidepopup">Arrow</a> 
 <p>Voici une Popup Bar, qui pourrait vour servir de menu. En cliquant sur la flèche vous cachez le menu.</p> 
 </div> 
 <div class="showpop"> 
 <a href="#" class="showpopup">Arrow</a> 
 </div> 

CSS

 body {background: url("http://rdsign.net/inc/img/bgWrap.jpg") repeat scroll center top transparent; color: #FFFFFF; font-family: Verdana,Geneva,sans-serif; font-size: 13px; line-height: 14px; margin: 0; padding: 0; }
 article{padding: 100px 20px 0}
 .popup {top: -100px;width: 100%; z-index: 10;padding: 20px;background: url("http://beta.rdsign.net/inc/img/fondBoitetissus.png") repeat;display: block;position: fixed;
 transition: all 0.5s ease-in-out ;
 -moz-transition: all 0.5s ease-in-out; 
 -webkit-transition: all 0.5s ease-in-out ; 
 -o-transition: all 0.5s ease-in-out ; 
 -ms-transition: all 0.5s ease-in-out ;
 }
 .popup > p {color:#333; font-size :14px; }
 .popup.show{top:0px;}
 a.hidepopup {background: url("arrow.png") repeat scroll left bottom transparent; display: block; float: left;height: 48px;text-indent: -9999px;width: 48px;margin-right: 10px;}
 .showpop {background: url("http://beta.rdsign.net/inc/img/fondBoitetissus.png") repeat scroll 0 0 transparent; border-radius: 5px 5px 5px 5px; display: block; height: 50px; left: 10px; padding: 20px 10px 10px; position: fixed; top: -10px; width: 50px; }a.showpopup {background: url("arrow.png") repeat scroll left top transparent; display: block; float: left;height: 48px;text-indent: -9999px;width: 48px;} 

JS

 <script type='text/javascript'> 
 var popupBox = document.getElementsByClassName('popup')[0];
 document.getElementsByClassName('hidepopup')[0].addEventListener('click', function(){
 popupBox.classList.remove('show')
 });
 document.getElementsByClassName('showpopup')[0].addEventListener('click', function(){
 popupBox.classList.add('show')
 });
 </script> 

Catégories :

HTML CSS Javascript