Trucsweb.com

Trucsweb.com

CSS

Sans jQuery

RDFFav

Panneau latéral de navigation Flex adaptatif sans jQuery

Le tout en pure CSS et « @media » avec un simple petit JavaScript pour faire basculer la classe.box-sizing, float, @Media Queries, Flex, Adaptatif, TransitionPanneau latéral de navigation Flex adaptatif sans jQuery

Sailing Stones at Racetrack Playa, Death Valley National Park  (Auteur : Photographie par Dan Sorensen)
Sailing Stones at Racetrack Playa, Death Valley National Park
Photographie par Dan Sorensen
(Source : flickr.com)

Système de panneau (sidebar) qui se retire de façon fluide sur un mobile, ou si la fenêtre est trop petite. Le tout en pure CSS et un « @Media Queries ». Plus un bouton « bascule » (toggle) pour afficher ou cacher le menu avec un simple petit JavaScript pour faire basculer la classe.

La complexité réside dans la structure selon la technique utilisée. Mais au début, deux calques, un bloc DIV dit « Panneau » à 20% et un « Contenu » à 80%. La façon simple, avec box-sizing: border-box et le bon vieux float:left

1. Créer le panneau et le contenu
<style>
  div {box-sizing: border-box;float:left;width:100%;}
  .cPanneau. {width:20%;background: #444;}
  .cContenu {width:80%;background: #666;}
</style>

<div class="cPanneau">20%</div> 
<div class="cContenu">80%</div>
2. Adaptatif selon la résolution

Ajoutons le « mediaquery », mais attention, je renverse les rôles, « mobil first » oblige :

<style>
  div {box-sizing: border-box;float:left;width:100%;}
  /* Mobil first */
  .cContenu {width:100%;background-color: #666;}
  .cPanneau {width:0;background-color: #444;}
  @media(min-width:768px) {
    /* Standard */
    .cPanneau {width:20%;}
    .cContenu {width:80%;}
  }
</style>

Hey, la moitié de la job est faite! Le panneau est ouvert uniquement pour une résolution supérieure à 767 pixels. Redimensionner votre écran pour voir le résultat.

3. Avec bouton bascule

Il ne manque que le bouton « bascule » pour ouvrir et fermer le panneau. Pour ce faire j’ajoute une classe, la classe « cBascule » qu’il suffit d’ajouter ou de supprimer lors d’un clic! Fait intéressant, l’ordre change selon la résolution. Sur un mobile, la classe « cBascule » indique que le panneau est ouvert, alors que la même classe indique au contraire que le panneau est fermé sur un 767px et plus!

/* J'ai ainsi ma classe « cBascule » pour mobile */
/* et un panneau ouvert (width:20%;) :  */
  .cPanneau.cBascule {width:20%;}
  .cContenu.cBascule {width:80%;}

/* Et la même classe inversé : */
  @media(min-width:768px) {
    .cPanneau.cBascule {width:0;}
    .cContenu.cBascule {width:100%;}
  }

Et le petit bout de JavaScript pour activer le bouton. Ah et le bouton, j’allais l’oublier :

<div class="cPanneau">50%</div> 
<div class="cContenu"><a id="oBascule" href="#">+</a> 50%</div>
<script>
  // Pure JavaScript 5+
  document.querySelector("#oBascule").addEventListener( "click", function() {
    document.querySelector('.cPanneau').classList.toggle('cBascule');
    document.querySelector('.cContenu').classList.toggle('cBascule');
  });
</script>

// Exemple beaucoup plus simple (!) avec jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $("#oBascule").click(function(e) {
    e.preventDefault();
    $(".cPanneau").toggleClass("cBascule");
    $(".cContenu").toggleClass("cBascule");
  });
</script>

Exemple en ligne complet Noter qu’avec un conteneur, il suffirait d’une seule « bascule » sur le conteneur...


Le code complet (avec animation)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Panneau latéral de navigation Flex adaptatif sans jQuery - Trucsweb.com</title>
    <meta name="dcterms.publisher" content="Conception Oznogco Multimédia (http://oznogco.com)" />	
    <style>
    div {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      width:100%;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    .cContenu {
      width:100%;
      float:left;
      background-color: #666;
    }
    .cPanneau {
      width:0;
      float:left;
      background-color: #444;
    }
    .cPanneau.cBascule {width:20%;}
    .cContenu.cBascule {width:80%;}
    @media(min-width:768px) {
      .cPanneau {width:20%;}
      .cPanneau.cBascule {width:0;}
      .cContenu {width:80%;}
      .cContenu.cBascule {width:100%;}
    }
    </style>
  </head>
  <body>
    <div class="cPanneau">50%</div> 
    <div class="cContenu"><a id="oBascule" href="#">+</a> 50%</div>
    <script>
    document.querySelector("#oBascule").addEventListener( "click", function() {
      document.querySelector('.cPanneau').classList.toggle('cBascule');
      document.querySelector('.cContenu').classList.toggle('cBascule');
    });
    </script>
  </body>
</html>

Tout est dans la marge!

C’est un exemple essentiellement basé sur le float:left;. Le contenu et le panneau sont alignés à gauche, toujours avec une marge à gauche. L’avantage est un positionnement « relatif » beaucoup plus facile à intégrer. On pourrait utiliser une table HTML (fixed) et sa très grande flexibilité. Ou encore carrément un display:table;. Une technique couramment utilisée est le positionnement absolu. Le contenu avec une marge à gauche et le panneau, de largeur équivalente à la marge du contenu, est positionné de façon absolue en haut à gauche. On a droit généralement à une horrible belle barre de défilement. De plus, on peut en arracher avec l’entête et le pied de page. Un exemple plus intéressant avec Flex, comme l’exemple suivant :

Exemple avec Flex

Même chose avec Flex à la différence cette fois de jouer sur la propriété flex: 1 ou flex: 0. Un bel exemple avec balisage HTML5 :

#oPanneau {flex: 1;}
#oPanneau.cBascule {flex: 0;}

<!doctype html>
<html lang="fr-CA">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Panneau latéral Flex - Trucsweb.com</title>
    <meta name="dcterms.publisher" content="Conception Oznogco Multimédia (http://oznogco.com)" />	
    <style>
    html {margin:0;padding:0;}
    body {margin: 0;padding:0;}
    .flex-container {
      padding: 0;
      margin: 0;
      -ms-box-orient: horizontal;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      -webkit-align-items: stretch;
      align-items: stretch;
    }
    .header,
    .footer {flex: 1 100%; background: #5d625c;color:#fff;}
    .sidebar {flex: 1; background: #c6c3bd;color:#000;}
    .main {flex: 2; background: #d6d3ce;color:#000;}
    .flex-item {padding: 10px;width: 100px;}
    #oPanneau {
      flex: 0;
      padding:0;
      border:0;
      overflow:hidden;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
    }
    #oPanneau.cBascule {flex: 1;}
    @media(min-width:768px) {
      #oPanneau {flex: 1;}
      #oPanneau.cBascule {flex: 0;}
    }
    /* Bouton */
    a[role="button"] {
      color: #fff;
      margin-left:-10px;
      font-weight:bold;
      background-color: #c6c3bd;
      padding:10px;
      text-decoration: none;
    }
    a[role="button"]:hover, [role="button"].bouton:focus {
      color: #fff;
      background-color: #b2b1af;
      text-decoration: none;
    }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <header class="flex-item header">Entête</header>
      <aside id="oPanneau" class="flex-item sidebar">
        <ul class="oMenu-nav">
          <li><a href="#"><b>Trucsweb.com</b></a></li>
          <li><a href="#" class="active">Accueil</a></li>
          <li><a href="#">Nouvelle</a></li>
          <li><a href="#">à propos</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </aside>
      <main class="flex-item main" style="text-align: left;"><a id="oBascule" role="button" href="#">X</a> Texte principal
        <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 
      </main>
      <footer class="flex-item footer">Pied de page</footer>
    </div>
    <script>
    document.querySelector( "#oBascule" ).addEventListener( "click", function() {
      this.innerHTML = (this.innerHTML=='X') ? '≡':'X';
      document.querySelector('#oPanneau').classList.toggle('cBascule');
    });
    </script>
  </body>
</html>

Vous avez un problème de positionnement après une redimension, recharger la page (de la mémoire cache) :

// Rafraichissement de page après
// une redimension de l'écran.
// Compatible Firefox
// Avec jQuery
$(window).bind('resize', function(e) {
  if (window.RT) clearTimeout(window.RT);
  window.RT = setTimeout(function() {
    this.location.reload(false); /* false pour la mémoire cache */
  }, 200);
});
Conclusion

jQuery, JavaScript 5+, Flex, tout est question de compatibilité. Et peut-être aussi d’assaisonnement. Si la recette est toujours la même recette, tout dépend du plat principal.

, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    8/10 sur 1 revues.
           Visites : 9751 - Pages vues : 9944
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @