Salut,
C'est encore Mister Air. Je suis tombé sur un blog sous Blogger (Beaucoup d'images sur pas grand chose) qui a la particularité d'avoir une navbar ne s'affichant que lorsque le pointeur passe devant.
J'ai demandé au blogmaster le code, qu'il s'est empressé de me donner, et je pense que cette astuce peut intéresser les lecteurs de ce blog.
Contrairement à un hack publié sur ce blog au mois de juin 2007(Cacher la barre de navigation sur Blogger), il suffit juste de copier une portion de CSS à la fin de celui de son blog et le tour et joué!!
Voici le code:
J'ai demandé au blogmaster le code, qu'il s'est empressé de me donner, et je pense que cette astuce peut intéresser les lecteurs de ce blog.
Contrairement à un hack publié sur ce blog au mois de juin 2007(Cacher la barre de navigation sur Blogger), il suffit juste de copier une portion de CSS à la fin de celui de son blog et le tour et joué!!
Voici le code:
/* Navbar
------------------------------
#navbar { height:3px; z-index:4; }
#navbar:hover { height:28px; }
#navbar-iframe { opacity:0.0; filter:alpha(Opacity=0) }
#navbar-iframe:hover { opacity:1.0; filter:alpha(Opacity=100, FinishedOpacity=100) }
Vous pouvez voir ce que cela donne sur mon blog test.
A+ :)
Mister aiR,
blogmaster des blogs OroO/Oro'o et Le Canrd qui Croque!
Tu aurais pu faire un petit effort un faire un peu de "broderie" autour du mail ;)
RépondreSupprimerSinon, mieux vaut publier l'adresse du site en question plutôt que celle de mon blog test (histoire de remercier aussi le gentil blogger qui m'a fillé ce code)
L'adresse: http://www.beaucoupdimages.com .
Bonjour, pourrais-tu préciser où il faut placer ce code?
RépondreSupprimerMerci d'avance!
@ Une Russe à Paris : Pour l'endroit où mettre le code, vois l'article cité au 3ème paragraphe (cacher la barre de navigation blogger).
RépondreSupprimer2 choses :
RépondreSupprimer1. ce n'est pas dit, mais ruse css valable que pour Firefox, IE ne connaissant pas le :hover autre que pour une balise <a>(sauf en utilisant un htc), et Opera n'en veut pas non plus apparemment :/
2. Y a un truc assez gênant, dès que la navbar s'affiche elle décale tout le site. Suffit de mettre une propriété "position" à "absolute", et aussi de mettre l'opacité à 60% pour qu'une fois affichée, elle laisse entrevoir le design derrière.
Le code que je propose est donc celui-ci:
/* Navbar ------------- */
#navbar-iframe{height:5px;z-index:99;opacity:0.0;filter:alpha(Opacity=0);position:absolute;}
#navbar-iframe:hover{height:28px;opacity:0.6; filter:alpha(Opacity=60, FinishedOpacity=60) }
Comme tout le monde j'ai copier/coller trop vite, y a pas besoin du "FinishedOpacity" non plus, ça sert à rien et en plus c'est "FinishOpacity".
RépondreSupprimerEn démo sur mon blog.
@ian c'est très élégant, je l'ai adopté ! merci !
RépondreSupprimerMerci, ton astuce marche tres bien :)
RépondreSupprimerEt encore merci !
RépondreSupprimerQue d'astuces intéressantes sur la blogosphère ...
Bah moi ca marche pas. Je copie et colle tout en bas de mon html et message d'erreur. J'ai supprime les cookies, j'ai insere plus haut dans le html, j'ai ajoute des guillemets avant/apres, rien n'y fait. Une solution pour moi ?!?!? Merci
RépondreSupprimer@ Agnes : insère avant
RépondreSupprimer/* Variable definitions
ca marche pas non plus mais merci.
RépondreSupprimerFonctionne pas.
RépondreSupprimerPar contre celle proposée par IAN fonctionne à merveille je me permet de la re-poster:
/* Navbar ------------- */
#navbar-iframe{height:5px;z-index:99;opacity:0.0;filter:alpha(Opacity=0);position:absolute;}
#navbar-iframe:hover{height:28px;opacity:0.6; filter:alpha(Opacity=60, FinishedOpacity=60) }
J'ajoute que pour ceux voulant régler le niveau de transparence il suffit de jouer sur la valeur de " opacity:0.6 " moi j'ai mis 0.8, c'est plus lisible.
Voila bon courage à tous et merci encore
Lorsqu'on met un flash dans la bannière la navbar se retrouve derrière, puis-je la remettre au premier plan?
RépondreSupprimerPour ceux ayant une bannière en flash, vous avez surement remarquer que la barre tombe derrière votre swf, voici l'alternative que je propose:
RépondreSupprimer/* Navbar ------------- */
#navbar-iframe{height:5px;z-index:99;opacity:0.0;filter:alpha(Opacity=0);position:relative;}
#navbar-iframe:hover{height:28px;z-index:99;opacity:0.6; filter:alpha(Opacity=60) ;position:relative;}
Des jours de recherche pour trouver ça, mon Dieu quelle vie :D
Bonjour,
RépondreSupprimermerci pour toutes ces astuces précieuses,
par contre en mettant le code a la fin du code html de mon blog ou en le mettant ailleurs sa ne marche pas, soit je ne peux pas enregistrer soit il affiche le code qui est visible par tout le mode,
pouvez vous me renseigner, car j'en ai mare de la navbar
yogi
Merci beaucoup!! ça marche parfait!
RépondreSupprimerMerci pour l'astuce
RépondreSupprimermerci bcp
RépondreSupprimerLe code de Ian marche à la perfection ! Voir sur mon blog : http://chateaux-de-belgique.blogspot.com/
RépondreSupprimer