Webinventif

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

@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.

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

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

Desole donc, il n’y a pas de bug

@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 ^^)

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.

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…

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.

@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)

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 !

@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

Bien joué la barre ! Chapeau !

@k-ny

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

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

@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

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

@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 ^^

merci

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.

@jamalac

Merci pour le retour et le test sur les navigateurs alternatifs

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)

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

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 !

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

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

@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

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.

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> …

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!

Beurk des tables ^^

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

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.

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.

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!

@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 …

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

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?

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

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.

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>

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.

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)

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

Encore moi,

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

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

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.

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

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)

@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.

bonjour

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

merci

@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.)