Étiquette : off-canvas

[jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache

Note: ce plugin est une évolution du code posté dans un précédent billet: [jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page.

Demo jsfiddle.net. Appuyez sur F12 pour voir les console.log();

Se référer au Git car la doc et le code présentés dans ce billet ne sont plus à jour! nui-Toggle on GitHub.

Description

Ce plugin permet d’afficher/masquer (en off-canvas) un petit encart en sticky dans la page. Sur la capture ci-dessus il s’agit d’un petit menu, utilisé dans une page longue, qui permet de naviguer d’ancre en ancre. Le clic sur le chevron masque le menu. Le chevron reste visible afin de pouvoir, au clic, faire ré-apparaître le menu.

La petite particularité de ce plugin est qu’il gère également l’état affiché/masqué lorsque la page est rechargée (si l’utilisateur a masqué le menu, celui-ci reste masqué au rechargement de la page et pour des connexions ultérieures aussi longtemps que ce premier n’a pas cliqué pour le ré-afficher). Ce comportement est rendu possible en exploitant la propriété localStorage de l’objet Window.

Usage:

Adapter à votre source HTML

Source HTML

Ce qu’il faut comprendre: 2 choses à vérifier:

  1. Vous avez un élément parent (ici <div id="inPageNavigation">[...]</div>) qui va contenir l’ensemble des informations à afficher/masquer.
  2. Vous avez un élément OBLIGATOIREMENT enfant du parent <div id="inPageNavigation">[...]</div> qui va permettre, au clic sur celui-ci, d’afficher/masquer le parent (ici un bouton <button id="toggleInPageNavigation" class="btn-InPageNavigation--toggle" role="button"></button>, mais ça peut également être un lien).

Source JS (jQuery)

Source CSS

[Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre

Sources JS et SASS maintenues à jour ici : https://github.com/franklang/foundation-sites-plugins.

Dans notre example, le off-canvas de droite prend prend 50% de la largeur de la fenêtre pour les écrans medium et supérieurs.

Les plugins Foundation offcanvas, box (util), mediaquery (util) sont obligatoires.

HTML

http://foundation.zurb.com/sites/docs/off-canvas.html

SASS

jQuery