Layouts – One Page Layout avec Side Menu (menu sur le côté)

LEÇON PRATIQUE

 

Caractéristiques

Pareil que le One Page Layout avec Top Menu sauf que le menu :

  • se trouve sur le côte de la page (côté gauche dans cet exemple mais ça pourrait être le côté droit)
  • est réduit en bulles pour minimiser son empreinte sur la page
  • les textes du menu sont affichés avec le survol de la souris
  • la bulle et le titre de l'élément actif ont une couleur différente
  • l'élément actif dans le menu est déterminé par le JavaScript / jQuery en prenant en compte le niveau du scroll. Ainsi les éléments s'activent dans le menu même dans le cas d'un scroll manuel

 

onepagelayout-basic-sidemenu-screenshotOne Page Layout - Side Menu

Page en ligne : Ouvrir

Code source (fichier ZIP) : Télécharger

 

Comment ça marche ?

Pour le scroll "automatique" rien ne change :

  • on exploite la fonction "animate" de jQuery pour animer la propriété "scrollTop" du document.
  • cette animation est déclenché par un clic sur un lien dans le menu
  • les liens de menu sont retrouvés par le JavaScript / jQuery car ils ont tous le même format : src="#section-1", src="#section-2", etc)
  • la section dans la page a retrouver via le scroll est la section avec l'identifiant qui correspond à la valeur dans le lien

La mise en place du menu :

  • le menu est en "position:fixed" pour être toujours visible sur le bord de la page
  • la position du menu (initialement top:0 left:0) sera géré par le JavaScript / jQuery pour que le menu soit toujours au milieu de la page quelque soit sa hauteur
  • plus besoin de #menu-margin car le menu est affiché par dessus le contenu dans tous les cas
  • responsive design :pas grand chose à faire car le menu est minuscule le plupart du temps. Dans l'exemple il y a quelques instructions CSS de type "@media queries" mais c'est uniquement pour gérer le contenu de façon classique.
  • dans le HTML on voit que chaque élément dans le menu est vide (à part la bulle ajoutée via CSS). L'attribut alt stocke le texte pour l'élément.
  • C'est le texte alt qui est mis en place par le code JavaScript / jQuery - code qui est déclenché par l'évènement "onmouseover"
  • l'évènement "onmouseout" fait disparaître le texte du menu quand la souris quitte l'élément
  • ces 2 évènements explitent les fonctions JavaScript / jQuery showMenuText() et hideMenuText

Positionnement du menu

  • fait via la fonction JavaScript / jQuery setMenuTop() qui ne fait que prendre la hauteur de la fenêtre du navigateur et la hauteur du menu pour calculer le décalage nécessaire

Changement de couleur pour l'élément actif du menu

  • fait via la fonction évènement $(window).scroll()
  • en gros on détecte quelle section de la page est active (principalement affichée) en regardant le niveau de scroll et la décalage de chaque section par rapport au début du document
  • on manipule via la fonction highlightMenuItem() la couleur du lien qui correspond à la section active (via le correspondance en place entre l'identifiant CSS de la section et celui du lien)

 

HTML


            <div id="menu">
              <ul>
                <li onmouseover="showMenuText('1');" onmouseout="hideMenuText('1');"><a id="section-1-link" href="#section-1" alt="Viverra Lorem"></a></li>
                <li onmouseover="showMenuText('2');" onmouseout="hideMenuText('2');"><a id="section-2-link" href="#section-2" alt="Cursus Vitae"></a></li>
                <li onmouseover="showMenuText('3');" onmouseout="hideMenuText('3');"><a id="section-3-link" href="#section-3" alt="Rhoncus Sodales"></a></li>
                <li onmouseover="showMenuText('4');" onmouseout="hideMenuText('4');"><a id="section-4-link" href="#section-4" alt="Inceptos Himenaeos"></a></li>
              </ul>
            </div>

            <div class="content" id="section-1">
                ...
            </div>

            <div class="content" id="section-2">
                ...
            </div>

            <div class="content" id="section-3">
                ...
            </div>

            <div class="content" id="section-4">
                ...
            </div>

 

CSS


#menu
{
  position:fixed;
  top:0;
  left:0;
  z-index:99;
}

...

#menu ul li
{
  display:block;
  padding:0;
  margin:0;
  cursor:pointer;
  font-size:20px;
}

#menu ul li:hover
{
  background-color:black;
}

...

#menu ul li a:before
{
  content:"\02022\0020";
}

 

JavaScript / jQuery


          function setMenuTop()                      /* positionner le menu au milieu de la page (dans la direction Y) */
          {
            var top = parseInt(($(window).height() - $('#menu').height()) / 2.0);
            $('#menu').css('top', top + 'px');
          }

          function showMenuText(idx)                 /* afficher le texte d un élément du menu */
          {
            var el = $('#section-' + idx + '-link'); /* identifier l élément à manipuler */
            el.html(el.attr('alt'));                 /* le contenu html de l élément prend la valeur stockée dans l attribut alt */
          }

          function hideMenuText(idx)                 /* désafficher le texte d un élément dans le menu */
          {
            var el = $('#section-' + idx + '-link'); /* identifier l élément à manipuler */
            el.html('');                             /* vider le contenu html de l élément */
          }

          function highlightMenuItem(sectionId)      /* changer la couleur d un élément du menu */
          {
            for (i = 1; i <= 4; i++) {
              $('#section-' + i + '-link').css('color', 'white');       /* réinitialiser la couleur de chaque lien */
            }
            $(sectionId + '-link').css('color', 'lime');                 /* changer la couleur du lien spécifié */
          }

          $(window).load(function() {
            $('a[href^="#"]').on('click',function (e) {                   /* definir l action suite à un clic sur lien avec dièse (liens menu) */
              e.preventDefault();                                         /* faire en sorte que l action par défaut ne soit pas déclenchée */
              var paddingTop = parseInt($('#wrapper').css('paddingTop')); /* calculer le padding en haut de la page à prendre en compte pour le cible du scroll */
              var target = $(this.hash).offset().top - paddingTop;        /* calculer la distance Y du haut de la page vers la section cible, décalé pour le padding en haut */
              $('html, body').stop().animate( { 'scrollTop': target }, 750, 'swing'); /* arrêter toute animation en cours puis animer le scroll vers le cible avec effet swing */
            });
            setMenuTop();                     /* positionner le menu (position initiale) */
            highlightMenuItem('#section-1');  /* mettre le highlight sur le premier élément du menu */
          });

          $(window).resize(function() {
            setMenuTop();                     /* repositionner le menu (suite à un changement de taille de fenêtre) */
          });

          $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();       /* distance Y en pixels entre le haut du document et le haut de l écran */
            for (i = 4; i >= 2; i--)                     /* boucler sur toutes les sections (sauf la première) une par une, dernière d abord */
            {
              var sectionId = '#section-' + i;           /* la section actuelle (de la boucle) */
              var prevSectionId = '#section-' + (i-1);   /* la section précédante (par rapport à la section actuelle) */
              if(scrollTop > $(prevSectionId).offset().top + parseInt($(prevSectionId).height() / 3.0)) /* si le début de la section précédante est au moins 1/3 disparu vers le haut... */
              {
                highlightMenuItem(sectionId); /* ...mettre le highlight sur la section actuelle... */
                return;                       /* ...et quitter cette fonction */
              }
            }
            highlightMenuItem('#section-1');  /* on n a pas trouvé une section à mettre en highlight - mettre la première */
          });