Créer un menu « stay-top » sous WordPress

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 : 3 015

É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 wrapper pour le rendre fixed
  • 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

36 commentaires

  1. Web Geek

    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

  2. jmlapam

    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

  3. kindy

    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

  4. arsdy

    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

  5. Christopher Hennuyez auteur de l’article

    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.

  6. Yoshizawa

    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

  7. dugdug

    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

  8. Cyril

    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

  9. Frédé

    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.

  10. pattespattes

    Merci beaucoup pour ce tutoriel, je m’en suis servi pour la partie de droite du thème suive le scroll.

    Je n’ai pas eu de difficulté particulière pour l’integrer au thème de base de wordpress, cependant lors du scroll, il y’a un effet de JUMP qui place le menu a sa position via Jquery, l’effet est assez important et rend pas très sexy l’usage

    1. Christopher Hennuyez auteur de l’article

      Bonjour, ravi que sa vous plaise Pourrais-je avoir un lien ? Si je comprend bien le bloc viens se heurté violemment au haut de la page de façon trop brutal ? 2 options : Un transition en CSS3 ou une animation en jquey
      la =>
      jQuery(‘#sticky_navigation_wrapper’).css({ ‘position’: ‘fixed’, ‘top’:0, ‘left’:0.5 })
      et ici =>
      jQuery(‘#navigation’).css({ ‘position’: ‘relative’ });

      1. pattespattes

        Merci pour cette réponse rapide

        C’est plus une téléportation brutal du menu vers sa nouvelle position pendant le scroll, j’ai bien essayé de faire des transitions avec Jquery, et même des fondus avec fadeIn() et fadeOut() mais cela n’a rien donné d’intéressant, sauf une nouvelle variante de ton plugIn qui fait disparaitre en fondu le menu de droite et le fait réaparaitre quand on remonte la page

        Le lien vers mon site en construction:

        http://superlexic.com/revistadoc/

        Ton code que je me suis permis d’adapter:

        jQuery(function() {

        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’:460, ‘left’:352.5 });

        }
        else {
        jQuery(‘#navigation’).css({ ‘position’: ‘relative’ });

        }};
        jQuery(window).scroll(function() {
        sticky_navigation();

        });

        });

        Le HTML:

        Le css:

        #sticky_navigation_wrapper {width:100%;z-index:2;}
        .menu-main-container{width:249px;margin:0 auto 0 auto;height:35px;}

        Merci encore pour ton aide

  11. MamaFati

    Tok tok!
    Y a-t-il une explication plus simple pour les nuls, vous savez, les « non développeurs » qui sont aussi sur WP.
    Bonnes fêtes à tous.
    MamaFati

    1. Christopher Hennuyez auteur de l’article

      Si le menu reste au top lors du scroll, c’est que le javascript ne fais rien. Vérifie la console javascript (Sur Chrome : Ctrl+Maj+J) et vérifie qu’il n’y a pas d’erreur de syntaxe etc… Il est possible que tu mal insérer les librairies ou dans le mauvais ordre…

  12. Gilles

    Bonjour et merci pour ce « bout de code » qui me sera fort utile.

    Je me permet cependant quelques petites remarques (en espérant ne pas dire de conneries) :
    – Dans le HTML, la ligne 2 est une LI (la fioriture ), il lui manque donc un UL et sa fermeture
    – Dans ce même code, la div #menu-main-container ne devrait-elle pas être à la ligne 2 pour contenir le fameux UL/LI cité ci-dessus ?
    – Dans le Jquery, au niveau de la boucle } else { l’ID #navigation n’existe pas dans l’HTML et ne peut donc pas être appelé. Il devrait en fait contenir l’ID #sticky_navigation_wrapper

    Encore merci, je cherchais ça depuis plusieurs semaines.

  13. Cecilia (Voyageurs Gourmands)

    Bonjour,
    je cherchais comment insérer un logo qui « dépasse » comme le votre, et je suis tombée sur votre blog… Je vais encore fouiner un peu, mais sinon auriez vous la gentillesse de me dire comment faire?
    Mon logo ne rend pas bien en header, et du coup, j’aimerais le fixer à ma barre du haut..

    Merci beaucoup par avance!

    1. Aurélien Denis

      C’est une question de CSS et non de WordPress pour le coup. Essayez de regarder mon code avec des outils de développement inclus dans tous les navigateurs bien que chaque situation soit unique et pas forcément applicable à votre site.

  14. Cecilecooks

    Bonsoir,

    J’ai bien lu votre tutoriel et l’ensemble des commentaires mais j’ai un petit soucis.

    Quand je vais dans ma feuille de style (style.CSS) et que je modifie dans le deuxième bloc (#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button), la valeur de position (ici relative) par fixed, mon menu disparaît complètement. Auriez-vous une solution pour que je réussisse à fixer mon menu en haut ? Je ne sais pas si cela peut vraiment être utile mais j’utilise le thème WP : Stacker Lite

    Je vous remercie d’avance pour votre réponse.
    Bonne soirée.

    /* CSS Menu */
    #cssmenu {
    background: #f9f9f9;
    text-align: left;
    position: relative;
    top: 0px;
    right: 0px;
    width: 100%;
    z-index: 9999;
    }
    #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative; ul:after, #cssmenu .menu > ul:after {
    content: « . »;
    display: block;
    clear: both;

Laisser un commentaire