09
JUIL

Un système de navigation ergonomique en bas de page

Publié le 09/07/14 à 07h48 par DJo

Découvrez un moyen simple pour rendre vos bas de pages plus ergonomiques avec un menu de navigation dynamique.

Découvrez un moyen simple pour rendre vos bas de pages plus ergonomiques avec un menu de navigation dynamique.

Depuis plusieurs années, la bonne pratique quand on arrive en bas de page consiste à afficher une flèche pour revenir en haut de la page. Pourquoi ? Pour aider les utilisateurs à revenir rapidement au menu et continuer leur navigation.

Pourquoi ne pas directement mettre une copie du menu en bas de manière plus discrète mais efficace ?

C'est l'objet de cette solution très simple qui reprend le concept des menus sur mobile pour l'appliquer sur les bas de pages:

Menu footer ergonomique et dynamique

La solution est très simple mais pratique pour vos utilisateurs, et cette dernière ne prend pas plus de place que votre ancienne flèche de retour au header.

Voici comment mettre en place rapidement le système:

Ajoutez le markup HTML dans le corps de votre page,

<div id="cd-nav">
    <a href="#0" class="cd-nav-trigger">Menu<span></span></a>
 
    <nav id="cd-main-nav">
        <ul>
            <li><a href="#0">Homepage</a></li>
            <li><a href="#0">Services</a></li>
            <li><a href="#0">Portfolio</a></li>
            <li><a href="#0">Pricing</a></li>
            <li><a href="#0">Contact</a></li>
        </ul>
    </nav>
</div>

Ajoutez le style qui va bien dans votre feuille CSS, (avec medias queries)

#cd-nav ul {
  /* mobile first */
  position: fixed;
  width: 90%;
  max-width: 400px;
  right: 5%;
  bottom: 20px;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
 
  transform: scale(0);
  transform-origin: 100% 100%;
  transition: transform 0.3s, visibility 0s 0.3s;
}
 
#cd-nav ul.is-visible {
  visibility: visible;
  transform: scale(1);
  transition: transform 0.3s, visibility 0s 0s;
}
 
.cd-nav-trigger {
  position: fixed;
  bottom: 20px;
  right: 5%;
  width: 44px;
  height: 44px;
  
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  z-index: 2;
}
@media only screen and (min-width: 1170px) {
  #cd-nav ul {
    /* the navigation moves to the top */
    position: absolute;
    width: auto;
    max-width: none;
    bottom: auto;
    top: 36px;
    visibility: visible;
    transform: scale(1);
    transition: all 0s;
  }
 
  #cd-nav.is-fixed ul {
    position: fixed;
    width: 90%;
    max-width: 400px;
    bottom: 20px;
    top: auto;
    visibility: hidden;
    transform: scale(0);
  }
}

Puis rendez le menu dynamique avec un seuil d'apparition à déterminer:

// browser window scroll (in pixels) after which the "menu" link is shown
var offset = 300;
$(window).scroll(function(){
    checkMenu();
});
 
function checkMenu() {
 
    if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
        //add .is-fixed class to #cd-nav 
        //wait for the animation to end  
        //add the .has-transitions class to main navigation (used to bring back transitions)
    } else if ($(window).scrollTop() <= offset) {
        
        //check if the menu is open when scrolling up - for browser that supports transition
        if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
            //close the menu 
            //wait for the transition to end 
            //remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
        } 
 
        //check if the menu is open when scrolling up - fallback if transitions are not supported
        else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
            //no need to wait for the end of transition - close the menu and remove the .is-fixed class from the #cd-nav
        } 
 
        //scrolling up with menu closed
        else {
            //remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
        }
    } 
}

Un petit détail qui ajoute une fonction agréable pour vos visiteur. A tester sur vos futures pages web !

 

Site Officiel

Baraguiné par Strictfx le 09/07/14 à 09h00
Strictfx sur La Ferme du Web
Bonne idée mais quid de la répercussion sur le référencement? D'après ce que j'avais cru comprendre, il était pas forcément bon de répéter deux fois un menu dans une page.
Des avis sur le sujet?
Baraguiné par tobalsan le 09/07/14 à 13h44
tobalsan sur La Ferme du Web
Je ne sais pas ou tu as entendu ça, mais c'est faux. La navigation est là pour aider l'utilisateur, alors avoir 2 navigation à différents endroits, ce n'est pas pris en compte par Google.
Baraguiné par Kyosuke le 20/09/15 à 04h08
Kyosuke sur La Ferme du Web
Quoi qu'il en soit, en regardant vite fait la démo, le menu principal n'est pas dupliqué, il change juste de position et d'apparence.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web