Barre de navigation fixe, dépliable et transparente

25/02/2008

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

Fichiers nécessaire à la mise en place de la barre de navigation (Obligatoire)
Fichiers de la page de démonstration (Facultatif)

1. On inclut les fichiers fraichement téléchargés entre les balises HTML <head> et </head>

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

LOTH Aurelien

Salut,

tres sympathique cette barre de navigation. Neanmoins une petite remarque, elle fonctionne tres bien sur ton blog avec firefox sous linux mais sur ta page de demonstration, quand on scrolle vers le bas, on a un effet desagrable : le menu remonte et redescend ensuite.
Cet effet indesirable n’est pas present quand on scrolle vers le haut

Mais tres symapatique comme menu
freak0

Pareil firefox et linux pas de problèmes. Joli effet je bookmark du coup 🙂
k-ny

@Aurelien

Merci pour le feedback, par contre le coup repositionnement en décalé me laisse perplexe ! Car sous firefox le menu est simplement placé en « fixed » (comme sur mon ancien blog), ce sautillement est étrange. Je réinstallerais linux sur mon autre bécane et je verrais si je peux arranger ce bug.

🙂
LOTH Aurelien

Je viens de trouver d’ou vient l’effet « indesirable », c’est compiz.

Desole donc, il n’y a pas de bug 🙂
k-ny

@freak0 : Thanks 😉

@Aurelien : ahhhh, cool alors, tu va m’eviter une manœuvre d’installation (en fait non mais du coup c’est moins pressant ^^) 🙂
jamalac

Bonjour et merci pour ce « tuyau », ici, sur mac os 10.4.11 et Firefox 2.0.0.12 ainsi que Safari 3.0.4, tout baigne ! Bonne journée.
nad

Bonjour,

Ah vraiment merci!!

J’aurais quelque questions est-il possible de positionner la barre
en haut du site plutôt qu’en bas, et aussi de déplacer les boutons (light,full..) voir ne garder que deux options open, close.

Aussi tu dis « à vous de jouer avec les fichier .css pour y caser tout ce que vous voulez. »
Je vois pas comment en css je vais pouvoir rajouter des elements…

Si tu pouvais éclairer ma lanterne parce que des que ça touche au javascript mon cerveau transpire…
Dan

Salut l’ami, vraiment très sympa cette ressource. J’ai testé sur mon Mac en 10.3.9 :
-Firefox 2.0 : ca marche nickel
-Safari 1.3.2 : quand on clic sur le bouton « full » il ne se passe rien, pour le reste c’est OK.
k-ny

@jamalac & Dan

Thanks pour les feedbacks, j’ai mis à jour la liste de compatibilité. J’verrais si j’peux corriger l’onglet full pour Safari 1.3.2

@nad

Pour placer la barre en haut ça va demander pas mal de modif, principalement à cause d’IE6 (hack css et js différent)

Et quand je dis « à vous de jouer avec les fichier .css pour y caser tout ce que vous voulez. » Je veux dire qu’il vous faudra certainement bidouiller les css pour pouvoir occuper tout l’espace en largeur, comme sur mon ancien blog (colonnes)
Yara

Pas mal du tout, mais j’ai une remarque aussi:

Lorsque le javascript est desactivé il pourrait etre sympas de mettre un display:none (par defaut)sur le menu (magicmenu) afin de ne pas utiliser le menu (qui lui utilise le js) et afficher le menu via JS.

non ?

Sinon c’est du bon boulot !
lebaron

Bien joué la barre ! Chapeau !
k-ny

@yara

C’est ce que je voulais faire au début, mais je me suis dis que du coup on prive le visiteur sans javascript d’un contenu peut-être utile. Donc j’ai préféré l’afficher en bas de page.
De plus si le menu contient du contenu referencable par les moteurs de recherches, il est préférable de ne pas le mettre en display: none

Mais ça reste discutable effectivement 😉
Yara

@k-ny

Je parlais que des onglet (light, full, close) pas du bloc en lui meme.

😉
jamalac

Re, j’ai parlé un peu trop vite ou alors je n’ai pas eu ce comportement lorsque j’ai testé la première fois. Petit problème avec Firefox 2 et mac os 10.4 : la barre rebondit lorsque je clique sur « close ». Une petite démo du comportement ici : http://www.steekr.com/index.php?m=c9ae77e8&a=7d397569&share=LNK330047c42c5d87a69

Bon courage pour la suite…

PS : rien à signaler avec Safari 3
k-ny

@Yara: Ah oui m****, j’avais oublié ce détails. Mais c’est maintenant corrigé 🙂

@jamalac: Merci pour la vidéo du bug. Je pense que ça venait de l’ordre d’exécution de mon code, j’viens de modifier 2-3 choses, donc si tu pouvais retenter pour voir 🙂
pickupjojo

Bravo pour votre passage sur Smashing Magazine et pour cette technique CSS très intéressante. 🙂
k-ny

@pickupjojo

Wow, merci de me le signaler! En plus je l’ai survolé cet article tout à l’heure ! Et je n’avais pas vu que j’étais cité ^^
Par contre ils ont backlinké ce billet, alors que le screenshot porte sur le header. De plus je ne retire aucun mérite vu qu’apparemment il voulais mettre en avant l’utilisation d’icônes dans les menus, alors qu’ils appartiennent au thème d’origine (the morning after) 🙂

Ps: et le monde est petit, je suis un lecteur de ton blog ^^
nad

merci
jamalac

Super, tout fonctionne à nouveau sur mac et firefox 2 ainsi que Safari 3.
Ça n’interessera peut-être pas grand monde mais c’est également ok pour les navigateurs alternatifs Camino 1.5.5 et Shiira 2.2
Merci encore pour cette ressource.
k-ny

@jamalac

Merci pour le retour et le test sur les navigateurs alternatifs 🙂
Jérôme

Super belle cette barre, même super sexy !

En plus elle fonctionne très bien avec le navigateur Flock v1.1 (http://www.flock.com)
jamalac

Il n’y a pas de quoi, et un petit dernier pour la route c’est également OK sur Opéra 9.26 😉
Mat

Merci pour ce tutoriel, le menu est vraiment sympa mais malheuresement je le trouve un petit peu long à s’ouvrir et se refermer ^^ Mais rien n’est parfait !
Pingback: Une barre de navigation déroulante et transparente en JS | Flux de la passion()
k-ny

@Mat
Si tu veux que ça soit plus rapide, ouvre le fichier « wbarrefixe.packed.js » et change tout les slow en fast 😉
n0a

Bonjour,
Je viens d’installer ce script sur mon site.
Ca fonctionne plutôt pas mal :).
Merci 😉

J’aurai en revanche voulu savoir si il était possible de personnaliser le magicmaxi en fonction des onglets.

Par exemple je souhaiterai utiliser un onglet blog en full pour lister des chose…
Un autre onglet .. News par exemple… En full aussi.
Autremendit, je souhaiterai que chaque onglet affiche un maximagin différent ^^.

J’espère avoir été assez claire ^.

Cordialement.
n0a
k-ny
@nOa

Oui c’est faisable, mais va falloir mettre les mains dans le cambouis !

Voici une piste:

tu rajoutes simplement des onglets dans la div magicmenu comme ceci:
```
<li><a href="#" class="magic2" id="onglet2">autre onglet</a></li>
```
Donc tu leur donne la classe « magic2 » pour qu’ils déplient le menu en maxi si besoin, et tu leurs donnent une id unique (forcement) pour leur assigner une fonction spécifique.

Ensuite utilise les fonctions show() et hide() de jquery, par exemple:
```
//quand on clic sur l'onglet d'id onglet2 
$('#onglet2').click(function(){
    //on affiche la div d'id zone2
    $('#zone2').show();
});
```
Enfin voilà, à toi d’adapter selon tes besoins 😉
atlante

Salut je trouve ce travail vraaaaiiiiiment remarquable et j’aimerais l’integrer à un site piloté par OsCommerce, mais alors dans quels fichiers placer les codes????
merci pour tes lumieres.
k-ny

Salut atlante,

je n’ai jamais utilisé osCommerce, mais je suppose que tu dois avoir des fichier « template » quelque part. Ouvre les et cherche les balises </head> et </body> …
atlante

Merci de ta reponse rapide.
malheureusement, c’est bien moins simple que cela n’en n’a l’air.
Tout est géré par des tables dans des tables dans des tables…
pour savoir ou est le tetete et ou est le cucul, c’est un peu compliqué.
c’est pour ça que je voulais avoir un peu plus d’infos.
Ceci dit, je vais y aller a tatons et je finirais bien par trouver.
je posterai ma reponse si je trouve bientot.
et encore bravo pour tes realisations elles sont super top!
k-ny

Beurk des tables ^^

Mais table ou pas, toute pages doit avoir une balise head et une balise body, c’est (normalement) obligatoire !
atlante

ooookkkk!!!
c’est dans index.php quela fete se deroule.
Pour les accros d’oscommerce.
Mais il faut savoit qu’avec IE7 on est recalé dès l’entree.
atlante

pourquoi je n’arrive pas à faire fonctionner avec ie7?
je dois être trop nul, ou il y a un truc que je n’ai pas saisi.
STF

est-ce que ça fonctionne chez quelqu’un sur internet explorer, parceque ça serait dommage…c’est trop beau.
Mais je n’arrive pas à voire non plus le resultat alors que sur firefox j’ai pas de probleme pour l’affichage.
Que fau-t-il faire avec le fichier wbarrefixe-ie6.css? faut il le modifier??
merci de votre reponse les gars je suis pressé de jouer avec!
k-ny

@atlante et STF

Chez moi ça fonctionne sous ie6 et ie7 …

Normalement rien à modifier …
Il doit y avoir une configuration particulière de vos css. Si vous avez l’url de votre fichier css que je jette un oeil rapidement …
STF

je l’ai aussi mis sur un osC.
Alors peut-etre qu’il faut modifier le stylesheet.css
STF

Ce que j’ai telecharge du wbarrefixe-ie6.css donne le code suivant:
/* Hack pour un scroll sans sautillements */
html {
background : url(null) fixed no-repeat;
}
/* Hack pour emuler la position fixed */
#magicbox{
position: relative;
top: expression(fixed_bottom(this,0));
}

Et c’est tout.
Je l’ai simplement place dans la racine de mon site au meme niveau que le wbarrefixe.css, et je n’ai de resultat que sur firefox.
la barre n’apparait meme pas sous ie.
Alors peut etre que c’est la config de mon ie qui bloque quelque chose?
k-ny

Tu ne dois pas ouvrir le fichier wbarrefixe-ie6.css. Il faut juste le télécharger (avec les autres fichiers), puis l’uploader sur ton serveur et ensuite rajouter les lignes d’intégration dans tes pages. Et attention que le fichier wbarrefixe-ie6.css doit obligatoirement être inclus APRèS wbarrefixe.css (ou autre fichier css)

Ps: ta config de ie peut bloquer uniquement si tu fait tes essais en local
STF

et c’est bien ca le probleme: »et ensuite rajouter les lignes d’intégration dans tes pages », ou dois-je mettre les lignes de code?
En tous cas merci pour ton aide, elle m’est tres precieuse.
k-ny

Et bien, c’est écrit sur ce billet, je ne peut pas être plus clair ! Je me cite:

« On inclut les fichiers fraichement téléchargés entre les balises HTML <head> et </head> »

Et pour être certain de ne pas rater ton coup, met les de préférence juste avant la balise de fermeture </head>

😉
STF

ah ok je vois ce que tu veux dire. Ca, c’est deja fait et c’est pourquoi ca fonctionne sous firefox mais pour ie, c’est un mystere car normalement en uploadant les deux .css a la meme racine, je devrais avois tantot l’un qui pilote ie tantot l’autre qui pilote les autres (si j’ai compris un petit quelque chose à ton code).
Seulement voila, il n’y a que Firefox qui répond.
k-ny

Hum …

Bon t’as pas une page online que je puisse tester par moi-même (tu peux m’envoyer l’url par mail si tu veux pas la mettre en commentaire)
wag

Bonjour,
Merci pour cette petite merveille,

J’ai voulu tester, aucun problème, juste, que je suis une bille, donc:

j’installe le tout, ça fonctionne très bien, à part que cela vire mon « body » »background » et remplit tout de blanc..(juste le »background ») où dois-je allez pour modifier cela?
Merci 🙂
wag

Encore moi,

J’ai réussie à régler le problème, désolée pour le dérangement 🙂
lebaron

Salut je viens d’installer la barre de navigation mais celle-ci est unitilisable sous IE7 ou inférieur comment faire? alors que sur firefox aucun problème voici l’adresse de mon site : http://lebaron.e3b.org
Laurent

Je garde pour ma part cette ressource très intéresse de côté, histoire de voir comment il me serait possible de l’intégrer dans mon blog et d’en justifier un intérêt réel. J’avais toutefois remarque celle-ci dans l’ancien blog, et posté un com’ à ce sujet il me semble. Je renouvelle alors mes remerciements.
STF

@lebaron
comment t’as fait pour que ça fonctionne sous ie? je viens d’ouvrir ton blog et tout est ok…
harold danfayre

Bonjour,

Je cherche une barre de navigation, j’aimerai installer la tienne sur un blog overblog, n’étant pas doué en informatique, je débute , peux tu m’aider stp me dire comment faire .
Je t’en remercie d’avance

Harold (neo igs police)
k-ny

@lebaron

étrange, test en virant les autre javascript de ta page, il y a peut-être un conflit.

@harold danfayre

Je ne connais pas trop overblog. Mais si tu a accès aux fichier template, ça doit être faisable.
eto

bonjour

une question stupide: ou faut il uploader les fichiers JS (dossier du theme?)

merci