Aujourd’hui, je vous dévoile les secrets de ces menus qui font le tour du Web. J’ai nommé le menu stay-top. Un menu stay-top c’est un menu qui, lorsque votre page Web est trop longue et que vous la faites défiler, s’ancre sur le bord supérieur de votre navigateur. A la base, il ne s’agit pas d’un tutoriel WordPress mais je vais vous montrer comment l’articuler sous notre CMS préféré.
Résultat final
Vous pouvez télécharger l’archive ZIP et visualisez dans votre navigateur favori le fichier index.html afin de vous donner une idée du résultat final. Pour visualiser l’effet, donnez quelques coups de molette de votre souris.
jQuery - Menu Stay Top
Taille : 122,0 KiB • Date : 17 septembre 2012 • Hits : 1 345Étape n°1 – Constitution du menu
Pour intégrer notre menu, je vais utiliser la fonction de menu personnalisé de WordPress. Je vous renvoi dans nos archives pour plus de détail sur la création de ce type de menu. Le but étant évidement de pouvoir le gérer en back-end sans devoir mettre les mains dans le cambouis.
Notre menu s’articulera de cette façon :
<div id="sticky_navigation_wrapper">
<li class="logo"><a href="{permalinkAccueil}"><img src="{logo}" /></a></li>
<?php wp_nav_menu('Primary Menu'); ?>
</div>
Voici le résultat en sortie :
<div id="sticky_navigation_wrapper">
<li class="logo"><a href="{permalinkAccueil}"><img src="{logo}" /></a></li>
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-{id}" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-{id}">
<a href="{permalink}" target="_blank">{Name}</a>
</li>
</ul>
</div>
</div>
La ligne 2 est optionnelle. Dans notre exemple nous pousserons l’idée plus loin en intégrant un logo qui s’affiche dans le menu, mais uniquement lorsque celui-ci viens s’ancrer sur le bord supérieur de votre navigateur…. Pure fioriture ! 
Étape n°2 – CSS
Ce que vous devez retenir :
Le wrapper, comprenez la div qui englobe votre menu, doit TOUJOURS être en index supérieur au reste du site. Dans notre exemple, il suffit d’ajouter z-index:2; aux attributs de l’ID #sticky_navigation_wrapper. Il doit être également égal à 100% de largeur, soit width:100%.
Votre menu peut-être inférieur à 100%, je pense au largeur fixe etc… Par exemple, le menu peut-être de 960px si vous appliquez un « 960-grid CSS framework ». N’oubliez tout de même pas d’y appliquer les attribut de centrage horizontaux (margin:0 auto 0 auto;).
Pour le reste, faites selon vos envies….
#sticky_navigation_wrapper {width:100%;z-index:2;}
.menu-main-container{width:960px;margin:0 auto 0 auto;height:35px;}
.menu-main-container ul{height:35px;list-style:none;margin:0;padding:0;}
.menu-main-container li{float:left;padding:0px;}
.menu-main-container li a{display:block;font-weight:normal;line-height:35px;margin:0px;padding:0px 25px;text-align:center;text-decoration:none;}
.menu-main-container li a:hover, .demo_container ul li:hover a{text-decoration:none;}
.logo, .logo a, .logo img{float:left;margin:0;padding:0;}
Voici le minimum syndical pour obtenir un menu de 960px de large sans fond. Attention de ne pas, justement, oublier de mettre un fond… Sinon votre menu passera au travers de votre site et ce n’est pas le but.A vous de mettre en forme comme vous savez si bien le faire.
Étape n°3 – jQuery
Dans notre menu, jQuery aura 2 rôles :
- Modifier le CSS du
wrapperpour le rendrefixed - Afficher le logo grâce à une animation lorsque le menu devient
fixed
Au début de notre fonction, nous cacherons le logo, capturerons la largeur de celui-ci et la position de notre menu. Ensuite, à chaque coup de molette, nous allons comparer la position de notre vue par rapport à la position initiale du menu et enfin nous changeront le CSS en fonction de cette comparaison.
Nouvelle version du code
jQuery(function() {
jQuery('.logo:visible').hide();
var sticky_navigation_offset_top = jQuery('#sticky_navigation_wrapper').offset().top;
var sticky_navigation = function(){
var scroll_top = jQuery(window).scrollTop();
if (scroll_top > sticky_navigation_offset_top) {
jQuery('#sticky_navigation_wrapper').css({ 'position': 'fixed', 'top':0, 'left':0.5 });
jQuery('.logo:hidden').animate({width: 'show'});
} else {
jQuery('#navigation').css({ 'position': 'relative' });
jQuery('.logo:visible').animate({width: 'hide'});
}
};
jQuery(window).scroll(function() {
sticky_navigation();
});
});
Vous voilà propriétaire d’un joli menu stay-top. Petit bémol tout de même, ce menu n’est pas compatible avec les navigateurs sur mobile. Dans une optique responsive design, je vous conseillerai d’utiliser jQuery for Mobile. En effet, tout les navigateurs Mobile ne prennent pas en charge l’attribut CSS position:fixed.
Enjoy !
Crédits photo : Samantha Decker
Assez facile à mettre en place comme menu sur wordpress je trouve et le rendu final est vraiment sympa
Dommage pour les versions mobiles, mais il doit bien avoir quelques solutions à creuse.
Bon tuto
Super tuto, facile a appliquer. Ça me donne des idées pour l’avenir. Merci pour le partage.
Le support de position:fixed sur mobile c’est :
- Mobile Safari – iOS5++
- Android 3 et plus
- Blackberry 5.0 / Blackberry 7.0
- Firefox Mobile 6++
- WebOS – 2.0+
- Amazon Kindle Fire
- Amazon Kindle (Netfront)
Pas de support pour opera mobile et opera mini et enfin Windows Phone 7
Merci pour cette précision
Merci pour le tuto, j’étais en train de voir pour le coder, mais j’ai vu un tweet passer …
top dès demain je vais tenter de me casser la tête avec mon thème lol. Si non je pense que je trouverais toujours une aide si ça foire … Merci pour le tuto qu’a même
merci pour le tuto c très claire
Auriez-vous un lien vers une démo SVP ?
Hélas, non… Il suffit de télécharger le projet et de cliquez sur « index.html ». Je pense que ça peut le faire ? Non ?…
vraiment sympa cet effect, merci bcp !
je cherchais comment faire ca sous wp … je pense que ca suffira le temps que je trouve ca sous forme de plugin …
merci encore
Sebastien
super tuto, merci bien.
je me demandais s’il était possible de l’adapter et de faire de ce thème plutôt un thème latéral, qu’on pourrait utiliser sur les thèmes portfolio…ce serait vraiment cool
Bien sûr, tout est possible ^^
En effet le rendu est assez sympa. Je n’avais jamais entendu cette nomination par contre ^^ mais cela sonne bien STAY ON TOP, cela me motive pas vous ?
Salut David
Stay on top pour en-haut.be… C’est clairement pour toi ça ^^
J’attire votre attention sur le code jQuery qui à été retravaillé. Celui-ci corrige quelques bugs. Notamment, l’animation de l’icône au changement de page. Ainsique l’effet « mitraillette » lorsqu’on scroll rapidement.
+1000 !
Comment fait-on sous le thème twentyeleven ?
Crée un childtheme et modifie le header et le CSS qui concerne. NE MODIFIE PAS LE THEME
Oui oui, merci, j’ai deja un themes enfants, mais j’y arrive pas pour modifier le header sous twentyeleven…
Copies le fichier header.php dans ton thème enfant et modifies-le.
Merci
par contre, ca marche pas chez moi… est ce que vous auriez la gentillesse de me donnés le code source de header.php ? svp.. 
et le jquery, on le met ou mdr ? 
merci pour votre temps
Franchement je n’arrive pas à comprendre qu’est ce qu’il faut copier et ou le copier ?
J’ai mon thème enfant mon header dans le thème enfant et je commence par ou dans tout ça?
Je suis pas au top en codage et je débute sur wordpress de puis quelques mois, merci.
L’idée est génial je la veux sur mon site snif snif
Bonjour,
Merci pour votre tutoriel que j’ai hâte de mettre en place
Cependant, je suis un véritable débutant et même si je me débrouille souvent, je bloque vraiment sur la partie jQuery.
Auriez-vous un tutoriel sur son utilisation utilisation ?
D’avance merci
Bonjour et merci pour le tuto c’est quelque chose que je cherchais depuis un moment sans connaitre le nom (parfois ça ne tient pas à grand chose).
J’ai tout de même plusieurs difficultés pour le mettre en place car voyez vous je ne comprends pas comment le code n°1 nous donne le code n°2 en sortie où visiblement, on n’a plus une gestion automatique des menus puisque que la fonction n’est plus appelée. Il semble (si j’ai tout compris) que cette fois on va chercher les indications pour appeler chaque ? On code donc le menu à la main?
Ensuite je ne vois pas où mettre l’image du logo car je ne comprends pas bien à quoi {logo} fait référence (faut il changer l’url? ou le nom du fichier? est ce une fonction à ne pas changer?)
Désolée pour toutes ces questions.