Home

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,

01.<div id="cd-nav">
02.<a href="#0" class="cd-nav-trigger">Menu<span></span></a>
03. 
04.<nav id="cd-main-nav">
05.<ul>
06.<li><a href="#0">Homepage</a></li>
07.<li><a href="#0">Services</a></li>
08.<li><a href="#0">Portfolio</a></li>
09.<li><a href="#0">Pricing</a></li>
10.<li><a href="#0">Contact</a></li>
11.</ul>
12.</nav>
13.</div>

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

01.#cd-nav ul {
02./* mobile first */
03.position: fixed;
04.width: 90%;
05.max-width: 400px;
06.right: 5%;
07.bottom: 20px;
08.visibility: hidden;
09.overflow: hidden;
10.z-index: 1;
11. 
12.transform: scale(0);
13.transform-origin: 100% 100%;
14.transition: transform 0.3s, visibility 0s 0.3s;
15.}
16. 
17.#cd-nav ul.is-visible {
18.visibility: visible;
19.transform: scale(1);
20.transition: transform 0.3s, visibility 0s 0s;
21.}
22. 
23..cd-nav-trigger {
24.position: fixed;
25.bottom: 20px;
26.right: 5%;
27.width: 44px;
28.height: 44px;
29. 
30./* image replacement */
31.overflow: hidden;
32.text-indent: 100%;
33.white-space: nowrap;
34.z-index: 2;
35.}
36.@media only screen and (min-width: 1170px) {
37.#cd-nav ul {
38./* the navigation moves to the top */
39.position: absolute;
40.width: auto;
41.max-width: none;
42.bottom: auto;
43.top: 36px;
44.visibility: visible;
45.transform: scale(1);
46.transition: all 0s;
47.}
48. 
49.#cd-nav.is-fixed ul {
50.position: fixed;
51.width: 90%;
52.max-width: 400px;
53.bottom: 20px;
54.top: auto;
55.visibility: hidden;
56.transform: scale(0);
57.}
58.}

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

01.// browser window scroll (in pixels) after which the "menu" link is shown
02.var offset = 300;
03.$(window).scroll(function(){
04.checkMenu();
05.});
06. 
07.function checkMenu() {
08. 
09.if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
10.//add .is-fixed class to #cd-nav 
11.//wait for the animation to end  
12.//add the .has-transitions class to main navigation (used to bring back transitions)
13.} else if ($(window).scrollTop() <= offset) {
14. 
15.//check if the menu is open when scrolling up - for browser that supports transition
16.if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
17.//close the menu 
18.//wait for the transition to end 
19.//remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
20.
21. 
22.//check if the menu is open when scrolling up - fallback if transitions are not supported
23.else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
24.//no need to wait for the end of transition - close the menu and remove the .is-fixed class from the #cd-nav
25.
26. 
27.//scrolling up with menu closed
28.else {
29.//remove the .is-fixed class from the #cd-nav and the .has-transitions class from main navigation
30.}
31.
32.}

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

Site Officiel

Publicités

Laisser un commentaire

Choisissez une méthode de connexion pour poster votre commentaire:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s