Dimanche 14 avril 2019

Hamburger, slideshow, js css et compagnie

Je déteste javascript autant que je honnis css. Mais il faut en passer par eux parfois.

Introduction

Deux objectifs indépendants :

1. Un menu déroulant qui n'apparait que lorsque la souris survole l'icône menu. Exactement comme ce site : ☰ Grognon. Cette partie sera en CSS pur. Pas de javascript.
2. Une visionneuse permettant de faire défiler des images.

Intentionnellement tout est dans le même fichier : html, css, et javascript. Beurk !

Volontairement le code sera minimaliste dépouillé de toute fioriture, afin de se concentrer sur l'essentiel

Le menu drop down en css pur

Le résultat souhaité est dans le fichier hamburger

HTML

<div id="header">
   <span class="hamburger">☰
      <div class="dropdown">
         <a href="#">Acceuil</a>
         <a href="#">Rubrique 1</a>
         <a href="#">Rubrique 2</a>
         <a href="#">Rubrique 3</a>
      </div>
   </span>
   Hamburguer menu
</div>

La div id="header est la barre du titre de la page.

La div dropdown est un conteneur positionné.

Puis viennent le bouton et les rubriques du menu. J'aurais pu ou dû faire des <li> ... </li>. Ça marche bien sans ...

Tout se joue dans le css.

CSS

Le sélecteur #header définit un conteneur de la barre menu-titre

#header {
   display: inline-block;
   width: 100%;
}

La classe hamburger contiendra le hamburger ☰. Elle a pour fonction d'être positionnée.

.hamburger {
   position: relative;
}

La classe dropdown conviendra pour le menu déroulant, qui sera invisible (display: none;)

.dropdown {
   position: relative;
   display: none;
}

Viennent ensuite les styles des items du menu déroulant. C'est cosmétique.

.dropdown a {
   display: block;
   text-decoration: none;
}
 
.dropdown a:hover {
   background-color: black; 
   color: white;
}

Le nerf de la guerre est ici. Le survol du bouton ☰ rend le menu déroulant visible.

.hamburger:hover .dropdown {display: block;}

Slideshow

Le but est donc de faire une boîte dans laquelle on peut faire défiler les images une à une, en cliquant dedans. Comme dans la boîte suivante.

Remarque : Les images n'ont d'intérêt que d'être disponibles dans ce site

HTML

Le code se résume à un identifiant slideshow qui contient des balises <img ... de classe sldimg.

<div id="<slideshow">
   <img class="sldimg" src="../img/eglise.jpg" style="display: block" alt="église"/> 
   <img class="sldimg" src="../img/leibniz.png" alt="graphe leibniz"/> 
   <img class="sldimg" src="../img/splineFig1_2.jpg" alt="graphe spline"/> 
   <img class="sldimg" src="../img/splineFig3.jpg" alt="graphe spline 2"/> 
</div>

Sauf la première elles sont toutes invisibles, par défaut.

CSS

Le choix d'un identifiant et non d'une class sera utile pour le javascript. Sinon c'est banal.

#slideshow {
   width: 300px; height: 200px;
   margin: 0; padding: 0;
   border: 2px solid grey;
   overflow: hidden;
}

Quand à la classe sldimg, son rôle est de permettre de la déclarer avec un display: none pour l'empêcher de s'afficher.

.sldimg {
   float: none;
   margin: 0 auto;
   height: 200px; max-width: 300px;
   display: none;
}

Seule la première image sera forcée dans le code html à l'affichage.

javascript

C'est un code simpliste, où on ne détecte de clic que dans la boîte.

var slideshow = document.getElementById("slideshow");
var slides = slideshow.getElementsByClassName("sldimg");
slideshow.addEventListener("click", function(event) {
   var i; 
   var len = slides.length;
   if(slides[len - 1].style.display == "block") { // cycle
      slides[0].style.display = "block";
      slides[len- 1].style.display = "none";
   } else {
      for(i=0; i<len-1; i++) { // set next
         if(slides[i].style.display == "block") {
            slides[i].style.display = "none";
            slides[i + 1].style.display = "block";
            break;
         }
      }
   }
});

La variable slideshow sélectionne l'identifiant slideshow.

La variable sldimg est un tableau contenant les images.

La fonction addEventListener crée un écouteur de clics de souris qui bascule l'image visible en invisible et rend l'image suivante visible. Cette fonction boucle, c'est à dire qu'à la fin elle revient au début.

Le code js fourni dans le fichier d'exemple slides est un peu plus élaboré. On teste la position du clic. S'il est dans la moitié droite de la boite on avance d'une image, sinon on recule.

Validateurs

Pour javascript j'utilise esprima

Et pour css j'utilise le service de W3C.

C'est très utile car les erreurs sont quatre fois sur cinq des coquilles : un deux-points en place d'un point-virgule, un caractère qui traine, etc.

retour