Se connecter Recherche

Aujourd’hui, je vais vous donner quelques morceaux de code vous permettant de créer, ou d’améliorer, la navigation sur un site One-Page.
Ces derniers étant en vogue actuellement, l’envie de créer le sien est de plus en plus présente. Ce type de site est effectivement un excellent départ pour tous ceux souhaitant présenter une activité professionnelle, quelques réalisations ou disposer d’un CV en ligne.

Seulement il y a un point crucial lors de la création de ce type de page web: la navigation. Celle-ci doit etre présente, compréhensible et informer en permanence l’utilisateur de sa position au sein de vos sections de contenu. De ce critère découle une expérience positive ou pas, point non négligeable quelques soit le type d’information présentées.

Dans ce petit tutoriel, nous verrons mettre en place le menu d’entête, les sections, mettre en surbrillance l’élément de menu correspondant à la section consultée et ajouter un effet de défilement lors de la navigation entre les différentes parties de votre page.
En bonus, je vous indiquerais également comment intégrer une navigation verticale pouvant être autonome ou en complément d’un menu placé uniquement en haut de page.

VOIR LA DEMO

En bref

La démo est d’un style très basique, je n’ai mis l’accent ni sur le contenu, ni sur l’adaptativité multi-support (non-responsive). Le résultat est centrée uniquement sur la navigation

Pour cette réalisation, nous utiliserons:

  • Normalize.css afin d’effectuer un reset des différents éléments HTML . Facultatif, tous dépend des éléments que vous utiliserez pour votre réalisation finale.
  • jQuery dans sa version 2.1.1. Obligatoire.
  • Un peu de CSS placé en inline pour la démo. Libre à vous d’insérer ce code dans une feuille de style externe et de le modifier pour votre résultat final.
  • Un peu de script JS, simplement pour que tout ça fonctionne.

Nous n’utiliserons aucun Framework Front-end (bootstrap, Foundation, …), l’objectif étant que ces codes puisse être ajoutés sur n’importe quelle structure en place pour peu que vous utilisiez jQuery.

Créer la navigation d'entête

Nous allons utiliser une navigation classique, établie sur un code de liste à puce et mise en forme en utilisant la propriété CSS display:table et ses dérivés. Les liens se verront attribués une class CSS spécifiques qui sera par la suite utilisée dans le code JS afin de les cibler.

Pour le code HTML, nous obtiendrons simplement:

<!-- Start horizontal navigation -->
<nav>
<div id="op-horizontalnav">
<ul class="op-sectionlist">
<li class="op-v-item"><a class="op-v-link" href="#mysect1">MENU ITEM 1</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect2">MENU ITEM 2</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect3">MENU ITEM 3</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect4">MENU ITEM 4</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect5">MENU ITEM 5</a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect6">MENU ITEM 6</a></li>
</ul>
</div>
</nav>
<!-- end horizontal navigation -->

Cette navigation devant servir également de point de repère, cette dernière sera en position:fixed afin d’être toujours visible quelque soit le scroll sur la page.
Les balise li auront une propriété de style display:table-cell afin d’assurer l’occupation de toute la largeur de la navigation sans avoir besoin de jongler avec des valeurs de padding.

/*== H nav ==*/
#op-horizontalnav {background:#171717; position:fixed; top:0; right:0; left:0}
#op-horizontalnav .op-sectionlist {width:100%; max-width:1280px; margin:auto;padding:0; text-align:center; display:table;}
#op-horizontalnav .op-v-item {list-style:none; display:table-cell; font-size:16px}
#op-horizontalnav .op-v-item .op-v-link {color:#fff; padding:16px 8px;display:block;text-decoration:none}
#op-horizontalnav .op-v-item .op-v-link:hover, #op-horizontalnav .op-v-link.active {background-color:#fff;color:#171717}

Créer les sections

Les différentes parties de page seront délimitées par une balise section. Ce n’est pas une obligation, vous pouvez utiliser des div, leur attribuer une class (pas un id par contre) mais il vous faudra penser à répercuter cette modification dans le code JS.

Les sections de cette démo sont basiques, elles contiendrons simplement une balise H1 avec quelques règles de styles afin de marquer visuellement ces dernières. La création du contenu vous appartient, sachez que ce code ne nécessite aucunement que les sections soit de hauteur égales, vous avez donc champ libre.

<!-- Wrapper sections -->
<div class="content">
<section id="mysect1">
<h1>SECTION 1</h1>
</section>
<section id="mysect2">
<h1>SECTION 2</h1>
</section>
<section id="mysect3">
<h1>SECTION 3</h1>
</section>
<section id="mysect4">
<h1>SECTION 4</h1>
</section>
<section id="mysect5">
<h1>SECTION 5</h1>
</section>
<section id="mysect6">
<h1>SECTION 6</h1>
</section>
</div>
<!-- end sections -->

Et un petit bout de CSS pour la mise en forme:

/*== Sections ==*/
section h1 {padding:450px; text-align:center; color:white; background:#333; border-top:1px solid red; margin:0}
section:nth-child(even) h1 {background:#222;} /*on différencie la couleur 1 section sur 2*/

Vous noterez que les id des sections correspondent aux différents liens des items de navigation.

Dynamiser le contenu

Nous allons maintenant ajouter un peu de JavaScript afin de créer un effect de scroll lors de la transition (via le menu) entre deux sections.

/* ====== Add Smooth effect ===== */
$(function() {
  var scrollToAnchor = function( id ) {
    var elem = $("section[id='"+ id +"']"); // on crée une balise d'ancrage
    if ( typeof elem.offset()  === "undefined" ) { // on verifie si l'élément existe
		elem = $("#"+id); }
    if ( typeof elem.offset()  !== "undefined" ) { // si l'élément existe, on continue
      $('html, body').animate({
              scrollTop: elem.offset().top }, 600 );} // on défini un temps de défilement de page
  };
  $("a").click(function( event ) { // on attache la fonction au click
    if ( $(this).attr("href").match("#") ) { // on vérifie qu'il s'agit d'une ancre
      event.preventDefault();
      var href = $(this).attr('href').replace('#', '') // on scroll vers la cible
      scrollToAnchor( href ); }
  });
});

Selon le rendu voulu, vous êtes libre de modifier la valeur 600 à votre guise. Je vous rappelle que cette valeur et exprimée en millisecondes.

Maintenant, nous allons ajouter un peu de code permettant à votre visiteur de connaître sa position au sein de votre page juste par un coup d’oeil sur le menu.

/* ====== add class on pagination if the section is visible ====== */
  $(document).scroll(function() {
  var cutoff = $(window).scrollTop() + 200; // on défini la position de déclenchement (*1)
  // Find current section and highlight nav menu
  var curSec = $.find('.current'); // on cherche l'élément (section) avec la class current
  var curID = $(curSec).attr('id'); // on récupère son ID
  var curNav = $.find('a[href=#'+curID+']'); // on cherche l'élément de navigation correspondant (*2)
  $('li .op-v-link').removeClass('active'); // on nettoie la navigation de la class active présente
  $(curNav).addClass('active'); // (*2) -> on ajoute la class active
  $('section').each(function(){
  if($(this).offset().top + $(this).height() > cutoff){ // si la section est dans le champ de scroll
  $('section').removeClass('current') // on nettoie les sections de la class current présente
  $(this).addClass('current'); // on ajoute la class current à la section visible
  return false; // on stoppe l’itération (le cas contraire, seule la derniere section se verra ajouter la class)
  }
  });
  });

la variable cutoff défini la valeur de scroll vertical entraînant la surbrillance du menu concerné. Vous pouvez la modifier sans hésitation, celle ci est exprimée en pixels.

Aller plus loin en ajoutant une navigation verticale

Si vous préférez utiliser une navigation placée en haut de page, disparaissant au scroll, vous serez bien avisé d’ajouter une navigation verticale toujours visible permettant à votre visiteur de naviguer sans avoir besoin de revenir en haut de page.

Je vous ai donc préparer un menu simple, composé d’item de type circulaire et affichant le nom de menu au survol de celui-ci.

<!-- Start vertical navigation -->
<div id="op-verticalnav">
<ul class="op-sectionlist">
<li class="op-v-item"><a class="op-v-link" href="#mysect1"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Naviguer vers la section 1</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect2"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Lire la section 2</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect3"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Directement à la section 3</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect4"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Se rendre à la section 4</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect5"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Voir la section 5</span></span></a></li>
<li class="op-v-item"><a class="op-v-link" href="#mysect6"><span class="v-marker"></span><span class="op-v-itemdesc"><span class="op-v-itembg">Dernière section de la page</span></span></a></li>
</ul>
</div>
<!-- end vertical navigation -->

Vous noterez que le code est un peu plus lourd que pour une navigation horizontale mais fonctionnalités obligent.
D’autre part, vous constaterez que les class attribués aux liens sont les mêmes que pour la navigation horizontale, ceci afin de permettre d’obtenir le même résultat d’interaction sans avoir besoin de recréer un code JS spécifiques.

Et pour styliser cette navigation:

/*== V nav ==*/
#op-verticalnav {position:fixed; top:0; right:0; left: auto;height: 100%;display:table}
#op-verticalnav .op-sectionlist {height:100%; text-align:center; display:table-cell; vertical-align:middle}
#op-verticalnav .op-v-item {display:block}
#op-verticalnav .justify-height {}
#op-verticalnav .op-v-link {display:block; margin:12px 0}
#op-verticalnav .v-marker {width:15px; height:15px; border-radius:50%; background-color:rgba(255,0,27,.4); display:inline-block; vertical-align:middle; margin-bottom:-2px; margin-right:10px;border: 1px solid #e1001b;}
#op-verticalnav .op-v-link:hover .v-marker, #op-verticalnav .op-v-item .op-v-link.active .v-marker {background-color:rgba(255,0,27,1); }
#op-verticalnav .op-v-itemdesc {display:inline-block; font-size:14px; position:absolute; white-space:nowrap; line-height:normal; padding:0 34px 0 0;vertical-align:middle}
#op-verticalnav .op-v-itemdesc .op-v-itembg{display:inline-block; background-color:rgba(0,0,0,.5); color:#fff; padding:4px 10px 6px 10px; border:1px solid rgba(160,160,160,.2); border-radius:4px; }
#op-verticalnav .op-v-link:hover .op-v-itemdesc {right:0px; }

Vous disposez maintenant d’une base solide que vous pouvez personnaliser pour créer Votre site One-Page. N’oubliez pas de reporter les différentes modifications de nom de class CSS ou de balise HTML dans le code JS afin d’assurer le bon fonctionnement de l’ensemble.

Commentaires Écrire un commentaire

  • Purjoy le 18 mai 2015 at 9 h 56 min Répondre

    Bonjour, j’ai utilisé votre tutoriel, j’aimerais savoir comment mettre une vidéo dans une section, ou d’autres éléments… Merci

    • EpicaDesign administrateurle 18 mai 2015 - 11 h 18 min Répondre

      Bonjour,
      Il vous faut ajouter votre contenu en utilisant du code HTML entre les balises section, en remplacement du H1.

  • Corentin le 23 novembre 2015 at 14 h 54 min Répondre

    Merci ! Je l’ai chipé ! Maintenant, je vais le modifier pour refaire mon site internet :)
    MERCI :)

  • beji le 12 juillet 2016 at 16 h 11 min Répondre

    Bonjour, je n’arrive pas à utiliser votre tutoriel, dés que je rentre une balise quelconque (p, h2 ul, li…) entre les balises sections ça me créé une page intermédiaire…Merci

  • laplumaencre le 5 août 2016 at 12 h 54 min Répondre

    Super tuto, simple mais efficace, exactement ce que je cherchais, MERCI !!!

  • Cyberdome le 19 septembre 2016 at 13 h 29 min Répondre

    Super! merci pour ce code et vos articles très instructifs :)

  • egrav le 26 janvier 2017 at 15 h 35 min Répondre

    Bonjour, je ne comprends pas je ne parviens pas à adapter la seconde partie de votre code : le scroll fonctionne parfaitement mais pas l’effet de surbrillance du menu selon la position dans la page :/

  • Première semaine chez OpenScop – Clément Ballet DTA le 10 juillet 2017 at 22 h 20 min Répondre

    […] Créer une navigation en one-page […]


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

*