Faire une navigation toute simple mais efficace sur une page

La navigation sur une page est importante pour l’expérience utilisateur. Vous pouvez avoir un beau design mais perdre vos visiteurs parce qu’ils n’ont pas bien été guidés. Sur mon site professionnel (une seule page) j’ai expérimenté une navigation sous la forme d’un slide vertical dans les deux sens et je trouve que le résultat est plutôt sympathique et agréable.

Pour arriver à cet effet, il faut installer le script jquery Better html anchor qui va vous permettre de faire cet effet de glissement entre votre menu et votre contenu sur la page, bien entendu il faut aussi installer la librairie Jquery. Ensuite sur le lien du menu il faut utiliser la classe “anchorLink” comme présenté dans l’exemple ci-dessous :

  • CONTACT
  • Puis insérer une div avec un name et un id qui correspondent au # du lien du menu :

    Et voilà le tour est joué, vous avez une belle navigation glissante sur votre site. Notez que vous pouvez faire remonter le visiteur au menu aussi.

    2803media

    Plus d’information sur le site du développeur du plugin jquery.

    Articles en rapport :

    15 Comments

  • 1
    August 31, 2009 - 11:43 am | Permalink

    // C’est vrai que c’est très sympa comme effet, et cela donne un style bien particulier, au dela du coté pratique et intuitif …

  • 2
    MalboX
    August 31, 2009 - 2:03 pm | Permalink

    J’aime bien, en effet c’est très fluide, sympathique et ça donne un petit air particulier à la page.

    Personnellement, j’aurais apprécié que la “ligne” des raccourcis/onglets suivent la navigation, c’est à dire reste toujours visible afin de ne pas avoir à toujours repasser par la balise “Top”.

    Trouvez vous cela moins beau graphiquement ? Moins pratique ?

  • 3
    August 31, 2009 - 2:15 pm | Permalink

    C’est vrai que cela était une option mais j’ai préféré faire le double effet ;)

  • 4
    August 31, 2009 - 2:23 pm | Permalink

    Bonne idée je suis d’ailleurs en train de le faire sur mon site pro, mais tu aurais du peut être rajouter un bouton qui permet d’aller a la suite directement sans remonter en haut ou effectuer un scroll.

  • 5
    August 31, 2009 - 4:28 pm | Permalink

    Comme MalboX, j’aurais fait suivre le menu.
    Car je suis allé voir le site en question sans visionner la vidéo. Et pour revenir au menu, j’ai scrollé comme un con après avoir regardé dans tous les sens comment je pouvais remonter au menu.
    Pour moi le “Top” n’a pas été assez explicite/visible.
    Il faudrait peut être tracker les clic sur le menu et le comparer au nombre de clic sur les top pour se rendre mieux compte de la compréhension de cette ergonomie.
    (soit en tranckant les liens directement, ou avec un système à la CrazyEgg)

  • 6
    August 31, 2009 - 4:31 pm | Permalink

    C’est vrai que c’est une option Alban, je vais regarder cela… Mais un menu flottant fait un peu plus gadget non?

  • 7
    August 31, 2009 - 4:47 pm | Permalink

    Sympa, sans le défilement en simple HTML ^^, c’est sympa de voir que tout se simplifie (au détriment peut etre des jobs de webmaster >< lol

    Merci pour la découverte

  • 8
    September 1, 2009 - 11:32 am | Permalink

    C’est vraiment sympa, nous avons mis en place le même système pour notre agence la-pulpe.net :D

    Pour notre part, on a opté pour la solution (cité ci-dessus) du menu qui suit le scroll et ainsi proposer la navigation à tout moment…

    Vous en pensez quoi ?

  • 9
    September 1, 2009 - 11:47 am | Permalink

    Très sympathique tu nous fais un tutoriel et je le diffuse ici!

  • 10
    fafa
    September 2, 2009 - 5:09 pm | Permalink

    On peut aussi adopter la solution mise en place par la WordPressAgency ARCHIparmentier pour le petit site http://www.gitenormand.com/ , très sympa.

  • 11
    December 23, 2009 - 12:20 pm | Permalink

    L’effet est très sympathique. Par contre c’est un peu déroutant au début : n’ayant pas aperçu de suite le lien “top”, j’utilisais la scrollbar pour remonter !!!

  • 12
    Ben
    February 9, 2010 - 5:15 am | Permalink

    Très beau site et bel effet mais ce qui m’intéresse particulièrement son intégration dans wordpress…
    Je débute en wp et je ne comprends pas comment fais-tu pour insérer tout ton contenu + la nav dans une seule page?
    Cette class fait partie de la solution?

    Merci pour tes lumières! Si c’est un “secret de fabrication” je comprendrai aussi.

  • 13
    Ben
    February 9, 2010 - 5:18 am | Permalink

    ERRATA cfr post 12

    la class en question a disparue à l’envoi. La revoici donc : class = wordpress y2010 m02 d09 h05 page pageid-87 page-author-henri

  • 14
    February 9, 2010 - 4:21 pm | Permalink

    Ben, la classe dont tu parles est gérée par body_class
    http://www.nathanrice.net/blog.....-function/
    et, non, ça n’a rien à voir avec ce que tu cherches.

    Pour mettre tout le contenu dans la même page il existe deux solutions :
    la premiere consiste à créer une page et simplement entrer ton contenu dedans (en passant par le html, tu feras ta mise en page en plaçant tes div et tes ancres où bon te semble)
    deuxieme solution, tu mets le code html avec les div et les ancres qui vont bien directement dans ton index.php (ou page.php etc…)

  • 15
    October 20, 2010 - 4:56 pm | Permalink

    ah… jquery quant tu nous tiens !

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>