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

Publié le par nessa

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 :

<a class="rsswidget" title="le mot ou phrase que vous désirez voir apparaître " href="url de l'article , page du site, traducteur, page facebook... "><img style="padding: 0px; margin: 0px;" alt="RSS" src="url de votre image" /></a>

 

Rendez-vous sur Hellocoton !

Partager cet article

Commenter cet article

objets publicitaires 13/06/2012 11:19

Merci pour ces infos :)

Soulef amour de cuisine 20/04/2012 17:40

voila nessa j'ai fait des icones, vas et dis moi ton avis, hihihi, et merci beaucoup pour le tuto

Soulef amour de cuisine 20/04/2012 16:54

ca y est ca marche, je dois seulement faire de belle photos maintenant

Soulef amour de cuisine 20/04/2012 16:49

nessa, j'essaye encore et les econes sont le texte libre????

Sagan33 20/04/2012 12:59

Coucou Nessa,
Pour le problème du non affichage sur FF Mozilla, Brendufat, blog Jus de méninges http://brendufat.over-blog.com/ vient de solutionner le problème.
Il faut rajouter au code css : #cl_1_0 {overflow:visible}
Effectivement, maintenant j'ai bien mon menu qui s'affiche et sur Internet Explorer et sur Mozilla. (http://www.lemiroirauxessences.fr/articles-blog.html).
Un grand merci à lui pour le partage de ses compétences.
Bisous Nessa,
A +++

Soulef amour de cuisine 20/04/2012 00:58

encore nessa
j'ai essayer de faire comme le tuto, je mets le second dans un html dans un texte libre, mais j'ai les icone sur le texte libre, pas a cote????

nessa 20/04/2012 08:30



oui j'aurais du avertir c'est le 2 ème effet kiss kool lol   les images du menu s'affichent dans le texte libre où l'on a placé les codes mais elles n'apparaîtront que sur le côté
 c'est magique lol 


 


si non j'ai utilisé le tuto du premier lien, je n'ai pas eu le temps de tester le fantasy  bisous 



Soulef amour de cuisine 20/04/2012 00:44

ah mais c'est genail, ca va beaucoup m'aider a alleger le haut de mon blog, ca c'est sur ma chere
merci pour les tutos, toi tu as utiliser lequel?
pour les liens, moi ca va me prendre une eternite pour remettre les liens, ouuuuuuuuuuuuuuuuuuuf

Isa 19/04/2012 22:28

ah oui !!
je suis nulle en informatique ( css et cie !!), alors si j'y suis arrivée....tout le monde peut le faire !!!^^
bises.

Isa 19/04/2012 22:22

oui, oui ^^ c'est pour ça que je reviens sur cet article (après je vais signer la pétition.....^^).
pour mes boutons, voici le lien: http://dabuttonfactory.com/
Non, ce ne sont pas mes menus qui buggent.....c'est le menubar d'ekla (tu sais celui au dessus de la bannière), il faut que je recharges ma page plusieurs fois avant de le voir....c'est
embêtant(car c'est notre "administration")....mais comme je te disais pas méchant !

Sur mon blog tu as un lien (le blog facile)qui fait des tutos css, html ....

bises. bonne nuit !!
bises.

lavandine60 19/04/2012 21:52

Merci de ta visite Nessa, je vois que tu vis des choses difficiles aussi. Mais pourquoi as-tu perdu ton appartement ? ca doit pas être super pour ton fils je m'en doute. Mais tu as tellement de
talents sur ton blog que tu devrais trouver du travail rapidement. L'essentiel pour trouver dans ces temps de crise, c'est de ne pas être trop gourmand en salaire...hélàs... Bon courage et à
bientôt. Je reviendrais te voir pour améliorer mon blog.

nadia-vraie 19/04/2012 20:26

Bonjour Nessa, je suis à rendre des visites sur hellocoton et j'aperçois ton article.Je vais revenir et essayer ce que tu mentionnes car présentement je ne suis pas chez moi.j,accompagne une amie
qui s'est fait opérer ce matin. J'ai quelques minutes et j,en profite pour venir sur mon blog.
À bientôt Nessa.

Carolyne 19/04/2012 19:28

ça marche pour tout chez moi ;)
bisous

Isa 19/04/2012 19:22

coucou !!
Je reviens de chez mes parents.
super ton article !!!! wouahhh !! on reconnait la pro de la recherche !! hihi !!
moi, je suis sous IE 8 je crois (car mon administration OB me dit toujours que mon navigateur n'est pas à jour....il me le disait sur l'ancien ordi aussi !)
alors tes onglets, je les vois en entier (ça coulisse pas) mais le lien marche.
chez moi, sur ekla, ça bug un peu depuis que j'ai mis les onglets...mais c'est pas méchant !!
bon, je m'occupes des enfants et je reviens pour voir ton autre article.^^
bises. bonne soirée.

nessa 19/04/2012 20:30



non non je connaissais déja tous les sites sauf le beau blog vert qui est le seul sur le net a proposé ça je crois lol  


ce qui m'a pris le plus detemps ce sont les imprime écrans ...


ah  bon ici c'est nickel ce menu est ultra léger et n'alourdit pas le blog car pas de java script je te conseille de mettre le code tout en haut en tout cas c'est ce que je fais sur ob dans
le premier texte libre comme ça des que le blog s'ouvre les menus chargent ...tu nous as pas dit comment tu avais réalisé tes boutons ?  bizzz bonne soirée



Cléo 19/04/2012 19:00

Contente de te revoir. Il faut que je pense, quand j'aurai un moment à mettre cet article en lien.
Gros bisous
PS : Peu présente en ce moment, mon zom est en vacances, je profite de lui et nous partons la semaine prochaine. Mes articles sont faits jusqu'en mai.

nessa 19/04/2012 20:30



Merci cléo, passes de bonnes vacances :) je suis sûre que tu réaliseras de jolis menus avec tes jolis fonds :) bisous



samar 19/04/2012 18:58

oohhhh je viens de voir ton clin d'oeil merciii ma belle s cuper gentil a toi !!
bizzz gourmande

samar 19/04/2012 18:57

Re-coucou Nessa !!
alors ce qui est genial en plus c qu'il descend au fur et a mesure qu'on descend sur la page c super ! je pensais a fair ecomme toi mais juste pour le suivi sur Hellocoton, FB et aussi twitter !!
t'en penses koi !!

nessa 19/04/2012 20:31



je t'ai déja répondu mais oui  on peut tout faire avec ces menus c'est super :)



mentale 19/04/2012 18:37

un peu compliqué, pour moi, mais à l'occasion j'essaierais!!

Bestofava 19/04/2012 17:43

ouh là, mais cela a l'air super ! je suis un peu fâchée avec le mode CSS, mais j'aime ces astuces de présentation.
Dès que j'ai un peu de temps, je teste !
merci pour le partage.
(lien mis en place sur mon blog number 1)

vert.citron 19/04/2012 16:53

ahahahaha!! ben tu vois, je ne lis que la moitié de tes titres!! ^^ c'est la parenthese ca fausse tout!

vert.citron 19/04/2012 16:31

en tout cas, sous mozilla : nikel! ^^ (internet explo quoi?! ^^ ca existe encore?!!)
j'aime bien ce genre de menus...je ne suis pas allée voir le lien encore: c'est du java? ou juste des codes passe partout à inclure dans le css? il faudra que je vois petit a petit pour le
mien!

pour el concours: pour l'instant: ca pousse! les fleurs ne sont pas encore au RDV, a part les fleurs des fraisiers! les fleurs de rosiers quant à elles, vont commencer a se former...les autres
attendent le retour du soleil! ^^
mais a ce genre de concours: ca depend des villes: genre mon village ils ne notent que sur la profusion de couleurs meme si elles ne vont pas ensemble! alors qu'a vitry: ils regardent tout un tas
de criteres, plus proches d'un veritable paysagement! donc c'est cool!
bises!

nessa 19/04/2012 16:49



mdr pour Explorer je suis comme toi mais  y en encore beaucoup qui y sont.


 


Non pas de java dans ces codes (c'est dans le titre ! lol) 


je croise les doigs pour ton concours et pour que la lune rousse ne roussisse pas nos plantes !  


bizz



écéa 19/04/2012 15:24

Bonjour nessa

Trop compliqué pour moi tout ça :)
Explorer je l'ai viré depuis longtemps, je n'arrivais pas à ouvrir OB avec...
Je ne suis pas encore assez calée ça viendra peut-être :)
Bisous...écéa.

samar 19/04/2012 14:21

coucou Nessa !!
j'ai bien recu ton message !! je pense que tu as raison mais tu sais que meme pour le canada c tout une procedure pour envoyer un colis une fois je devais envoyer un colis de rien du tout des
petits cadeau a ma famille oulaaaaa il faut remplir une declaration de douanes y mettre tout ce que cela contient le prix etc... bref !! galere !! mais je vai voir des partenaires du canada au
moins cela leur coute moins cher l'envoi loll concernant ton menu hier soir j'etais sur ton blog a lire qlq articles bref !! alors sur Windows 7 internet explorer le menu est partait un menu
deroulant !! par contre sur Windows XP tjrs sur internet explorer le menu reste apparant (fige ) mais il fonctionne qd tu cliques sur les 5 onglets: les 2 premiers ouvre sur la meme page les 3
derniers s'oouvrent sur une nouvelle page !!
voilouuuu si t'as des questions pas de soucis ma belle

tiot 19/04/2012 11:28

salut
merci pour ces combines
bonne journée

PEARL 19/04/2012 11:28

Bonjour Nessa
J'espère que tu as lu mon mail perso, en tout cas merci pour la touche sur mon blog.
Très sympa ces onglets coulissants.Tu fais bien de nous en faire profiter.Bises et très bonne journée belle amie.

Sagan33 19/04/2012 11:22

Bonjour Nessa,
Il y a un big problem avec ce menu. Là, je suis sur internet explorer et il est affiché complètement déroulé et inopérant. J'attends la réponse de Brendufat, il est un des seuls je pense à pouvoir
solutionner ce problème.
Bien à toi Nessa, à plus.
Geneviève

nessa 19/04/2012 11:49



tu sais ce que je pense d'Explorer grr  bon  je le réinstalle spécialement pour voir le problème; c'est chez toi ou sur tous les sites que j'ai mentionnés ?  bizz



jill-bill.over-blog.com 19/04/2012 11:08

Bonjour nessa ! Le progrès dans tout y compris sur la toile... faut pouvoir suivre... tu expliques bien ! Allez la belle journée à toi ! Bizzz jill