Barre de navigation fixe, dépliable et transparente

25/02/2008
Projets Allez aux commentaires

Explicite mon titre, non ? 😀

Voici un tutoriel une ressource qui va vous permettre de mettre en place une barre de navigation dépliable sur votre site / blog et qui sera fixée en bas de l'écran (en bas de l'écran oui, pas du site).

En fait, je reçoit très régulièrement des demandes d'informations sur la barre de navigation de mon ancien blog (pas compatible ie6). Apparemment le principe plait à beaucoup de monde, et j'ai souvent promis de faire un tutoriel à ce sujet, mais je n'avais pas encore eu le courage de m'y mettre.

Préface

Alors à l'époque de la mise en place de cette barre sur mon ancien blog, je débutais en javascript et du coup c'est un peu codé avec les pieds. De plus je m'étais basé sur la librairie Scriptaculous, qui est un peu lourde.

J'ai donc tout repris à zéro, et évidement je suis parti avec la librairie jQuery cette fois-ci ! Du coup le code est plus simple, moins lourd et compatible avec IE6 ! Evidement j'ai aussi pensé au cas des personnes qui naviguent sans javascript activé (ça existe encore ça ?) pour que ça reste accessible. Sans javascript, la barre de navigation ira se placer tout en bas de la page, sans gêner personne 🙂

Il vaut mieux être initié au CSS et au formatage HTML pour pouvoir utiliser au mieux cette ressource !

Compatibilité

  • Windows
    • IE6, IE7, Opera 9+, Firefox 2 et Flock
    • IE5.5 et inférieur
  • MacOs
    • Firefox 2, Safari 3, Camino 1.5.5, Shiira 2 et Opéra 9
    • Safari 1.3.2 (Onglet "Full" inactif)
  • Linux
    • Firefox

Exemples

Voici la page de démonstration, et vous pouvez aussi voir un exemple sur mon ancien blog (même si c'est moins poussé)

Donc il s'agit d'une barre à 3 positions.

  • Close: la barre est completement cachée (juste les onglets sont visible)
  • Light: affiche la div supérieure de la barre
  • Full: affiche l'ensemble de la barre

Et évidement il y a une mémorisation (via un cookie) de la position, histoire de retrouver la barre dans la même position de page en page.

Téléchargement et installation

  • 1. On inclut les fichiers fraichement téléchargés entre les balises HTML <head> et </head>
<link rel="stylesheet" href="wbarrefixe.css" type="text/css" media="screen" />
<!--[if IE 6]>
<link rel="stylesheet" href="wbarrefixe-ie6.css" type="text/css" media="screen" />
<![endif]-->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script src="wbarrefixe.packed.js" type="text/javascript"></script>

Evidement si vous utilisé déjà jquery, supprimez sa ligne d'intégration.

  • 2. On inclut ce bout de code html juste avant la balise de fermeture </body>
<div id="magicbox">
        <div id="magicmenu"><ul>
                <li><a href="#" class="magic1">Close</a></li>
                <li><a href="#" class="magic2">Full</a></li>
                <li><a href="#" class="magic3">Light</a></li>
        </ul></div>
        <div id="magiccontent">
                <div id="magicmini">Bandeau mini: <a href="#">Revenir en haut de page</a></div>
                <div id="magicmaxi">Bandeau maxi <br /> Blabla<br />Re Blabla</div>
        </div>
</div>

Vous pouvez évidement changer le contenu des div "magicmini" et "magicmaxi", mais ne changez pas les classes et les id !
La div "magicmenu" contient les onglets de navigation. La div "magiccontent" contient les deux div correspondantes à "Full" et "light" (magicmini)

Voilà c'est tout, après à vous de jouer avec les fichier .css pour y caser tout ce que vous voulez.

Conclusions

La source n'est pas forcement des plus simple à personnaliser (CSS, exceptions due à IE6, style par javascript), mais la structure XHTML est clarifiez au maximum. Comme d'habitude, évitez de mettre du contenu qui est indispensable à votre site, car même si la barre de navigation reste visible est accessible sans javascript, elle sera visible que tout en bas de vos pages.

Et si des personnes sous Mac et linux passent dans le coin, un petit feedback ne serais pas de refus car j'ai des doutes sur le fonctionnement universel de cette ressource ^^

Wouah, ça m'a donné faim tout ça, allez bon app 😉

-----

Articles relatifs

←  Older Comments
 →
  • k-ny

    @edo

    En fait tu les upload un peu out tu veux, mais en général il est conseillé de les uploader dans le dossier de ton thème (skin) si il y en a un, ou dans le dossier contenant déjà les autres fichiers de style CSS. Ensuite à toi de bien les cibler (étape 1.)

  • fine

    salut,

    je suis fan de ce genre de graph et je suis en train de réactualiser mon site internet.
    j’aurais aimé tester cette barre de navigation mais le zip que je télécharge est erronné et je ne peux même pas enregistrer ta page de démo pour récupérer les scripts… tu aurais idée sur la raison?

  • Guitariff

    Bonjour à tous,

    Tout d’abord bravo pour ce script très intéressant. Je suis sous Mac OS 10.5 et Firefox 2.0.0.14, j’ai un petit soucis avec les cookie, en effet, la position de la barre mémorisée n’est conservée que pour un repertoire et ce qu’il y a en dessous.

    Exemple :
    /toto/ en position haute
    /toto/tata.html sera mis en position haute
    /jojo/ sera en position basse

    Avez-vous une petite idée de solution ?

    Autre point, est-il possible de modifier d’augmenter l’opacité de la barre ?

    Merci de vos réponses.

  • Sieg Hart

    Bonjour,

    je voudrai utiliser cette barre pour camoufler un lecteur de musique en flash.
    Le probleme c’est que quand je clique sur « fermer », ca camoufle bien le lecteur, mais il s’arrete.
    Pouvez vous m’aider?

    Cordialement.

  • Zephyr

    Bonjour,

    Je voudrai savoir comment faire pour que par défaut le menu soit fermé, et pas que le menu « light » soit ouvert par défaut.

    Cordialement.

  • linepel

    Bonjour

    Le téléchargement des fichiers nécessaires à la mise en place de la barre ne fonctionne pas. Win Zip envoie le message suivant: »Ne peut ouvrir le fichier:il ne semble pas être une archive valide. »
    Dommage! Est-ce seulement à moi que ça arrive?

    Merci

  • linepel

    Bonjour

    au sujet du téléchargement, j’ai utilisé Firefox et le téléchargement a réussi alors qu’avec IE7 ça ne fonctionnait pas.

    Mystère…

    merci pour le tuto

  • bastien

    J’aime beaucoup ce systeme.J’aimerai l’utiliser pour mon site.
    Seulement je voudrai avoir cette barre en haut de l’écran et non en bas.Pourrai tu me dire ce qu’il faut modifier s’il te plaît.Merci d’avance

  • Tof

    Salut , merci pour ce code il marche nikel ! je l’ ai intégré sur mon site et je rends hommage dans la rubrique « credits » . Pour mettre la barre en haut de l’ écran je n’ ai pas cherché mais si on sait aiguiller vers la solution ce serait cool.

    encore merci pour le tuto !

  • Paul

    J’adore ce script. Je l’utilise sur mon site. Je l’ai modifié pour mes besoins. Sinon il ne fonctionne pas sur IE8.
    Merci

  • Marissa

    Salut, super bien comme script mais comme dis paul c’est dommage, cela ne marche pas avec IE 8 🙁

    Mais merci quand même!!!

  • blubsy

    Bonjour,
    merci beaucoup pour ce superbe script.
    Mais j’ai aussi constaté que sous ie8 qui viens juste de sortir officiellement le script est inopérant.
    Bon je regarderais un peu plus tard d’où cela peut venir mais merci beaucoup.

  • IVIedia

    Hello, le systéme j’aime bien il tourne super, mais depuis la version 8.0 de IE et de FF, il y’a des soucis …

    mais sinon ça marche d’enfer 🙂

  • Mimir

    Hi,

    Beaucoups de mes utilisateur ce plaigne que la bare ce positionnent au milieu de la page de mon site et gene a la navigation … personne serai a quoi pourai etre du ce bug …

  • magicvinni

    Bonjour,

    Oui, superbe menu, mais ça ne fonctionne pas sous IE8, en effet, et je n’arrive pas à résoudre le problème. Certain ont-ils trouvé une solution ?

    Merci

  • PiLou

    Merci!
    Ton tuto ne pouvait être plus clair! 🙂

  • Beyls

    Moi non aussi, la barre ne marche plus avec ie 8, dommage, ca ruine quelques pages de mon site 😉 D’autant plus que ie 8 devient très répandu! Dommage, en espérant que le super webmaster de ce site entende nos plaintes 😀 😀

    Bye!

  • Bouh Studio

    Bonjour,

    je viens de l’adapter sur une boutique Prestashop et je ne n’est pas d’erreur sous IE 8.

    Très beau bandeau 🙂 merci

  • Nico

    Bonsoir, en effet sous i8 ça ne marche pas, car i8 refuse les sessions jquery ou les cookies avec ces scripts là. En tout cas pour ceux qui voient sous i8 la barre de navigation au max, il vous suffit d’ajouter après dans le fichier js où il y a la condition si c’est la version 7 de ie, d’ajouter ceci : else if($.browser.version== »8.0″){
    $(« #magicbox »).css(‘position’,’absolute’);$(« #magicmini »).hide();$(« #magicmaxi »).hide();}
    La barre s’affichera en petit c’est déjà ça, concernant les cookies, je conseille de faire appel dans le fichier js grâce à ajax avec la méthode GET à un fichier php extérieur qui gère la création de session par exemple, c’est une idée je vais essayer de la tester.
    Nico.

  • Niele

    Bonjour,

    2 ans après le dernier post, sous Google Chrome pour Ubuntu, AUCUN problème ^^

  • Lemis

    Salut a tous,

    Cool et sympa ce script, seulement il s’exécute bien en local et lorsque je balance la page sur le net plus rien ne s’affiche la barre ne se soulève même plus c triste et pourtant j’aurai bien aimé l’intégrer à mon site; j’ai besoin d’aide svp. j’utilise firefox 12.0

←  Older Comments
 →