comment mettre des supers menus/onglets coulissants verticaux [sans java script et pour toutes plateformes]

Bonjour, je ne sais pas si vous avez remarqué, j'ai installé cette semaine des petits onglets sur le côté gauche de mon blog dont un très pratique pour retourner en page d'accueil :)

C'est chez Isa que j'ai découvert la première fois ces menus

Je lui ai demandé où elle avait trouvé le tuto pour les installer et elle m'a gentiment donné le lien le voici :

====> http://data0.ek.la/le-blog-facile/perso/tutoekla.html

La page est en cache (on ne peut rien cliquer dessus) mais c'est très bien expliqué.

Il faut passer par son CSS de blog mais avec juste quelques copiés collés on obtient un joli menu.

Plus facile que les menus déroulants ...

je vais vous mettre les liens et les images pour que vous vous rendiez compte de ce que l'on peut faire.

~~~~~~~~~~~~~~~~~~~~~~

- Chez moi j'ai mis des images avec le texte intégré à la vertical

Les 2 images supérieures viennent du site Ekla, les autres je les ai crée en utilisant les fonctions "collage de texte" et "rotation" sur photofiltre logiciel gratuit.

menus coulissants 1

- Isa a choisi de mettre des titres horizontales

Isa est spécialiste de la PAM (porcelaine froide) ça vaut le détour

====> http://lesfaitmainsdisaetdekillian.eklablog.com/

pour créer des jolis boutons j'avais fait un tuto ici http://mademoiselle-biotupp.over-blog.com/article-tuto-generateur-boutons-relief-roll-over-58095624.html

Isa nous dira sûrement en commentaire quel générateur elle utilise :)

- Sagan a choisi des images sans titres mais le titre apparait au rolle over, ce que j'avais fait au début mais le rolle over n'est visible que sous chrome et explorer et non sous firefox

Sagan a un blog au design exceptionnel qui fourmille d'astuces

====> http://www.lemiroirauxessences.fr/

et en plus on y apprend beaucoup de choses sur la naturaopathie, huiles essentielles ...

çi-dessous l'imprime écran est tiré de son article "Les plantes et la digestion " à lire : ici

- chez fantasy Graph les onglets sont vraiment au top avec un roll over lumineux sur le bouton central à cliquer

et en plus elle donne elle aussi un tuto

====> http://fanstasy-graph.eklablog.net/onglets-coulissant-a39580075

je n'ai pas encore approfondi la chose mais je sens qu'il y a des passionné(es) qui vont s'éclater à faire des jolies choses :)

- un autre exemple chez une autre pro du design Christelle Vinsonneau

====> http://awerpi.olympe-network.com/

Chez elle aussi comme chez Sagan, des images avec des titres au survol de l'image; je dois vérifier si ces titres apparaissent bien sous FF , si oui ça pourrait aider Sagan :)

en réédit :oui au survol sous FF on voit les titres des onglets donc le code doit être différent de celui vu sur http://data0.ek.la/le-blog-facile/perso/tutoekla.html

Réédit:

je suis entrain de réinstaller le navigateur Explorer, si vous avez Explorer chez vous et un peu de temps pouvez vous me dire si ces 5 menus apparaissent normalement chez vous ? (les onglets coulissent et sont clickables vers d'autres pages ) si non dites seulement pour chez moi

merci à Samar de Boston US pour son commentaire qui nous fait avancer un peu

son blog de cuisine :) http://mesinspirationsculinaires.over-blog.com/

Réédit 2

si vous avez pris le code du site http://data0.ek.la/le-blog-facile/perso/tutoekla.html

(je n'ai pas encore tester le code de Fantasy graph)

Il faut

rajouter dans le CSS ce code #cl_1_0 {overflow:visible}

pour ne pas avoir de problème sous FF et Explorer ...

Merci à Bren du Fat qui a un blog d'aide de design exceptionnel "Jus de Méninge" à visiter absolument ! et à Sagan :)

http://brendufat.over-blog.com/

~~~~~~~~~~~~~~~~~~~~~~~~~~

Pour faire un roll over texte au dessus des images (au passage de la souris sur l'image un texte apparaît) il faut remplacer le code url de l'image (en html , module libre) par ce ce-ci :