28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'aimerai mettre en place un fil d'ariane complexe sur mon site, avec les menus déroulants (simples), un peu comme sur lonelyplanet http://www.lonelyplanet.com/france/languedoc-roussillon/perpignan ou getsatisfaction http://getsatisfaction.com/flock/topics/why_doesnt_the_chat_bar_on_facebook_show_up

Est ce que quelqu'un aurait idées des techniques employées et/ou aurait vu un tuto quelque part qui me permettrait de me rapprocher d'une telle solution ?

Merci d'avance pour votre aide,

cyan
Bonjour,

Un fil d'ariane ne dépends pas du menu que tu utilises, mais de l'arborescence de ton site.

Il y a plusieurs solutions : utiliser l'URL pour indiquer les sections, insérer une variable dans la page qui identifie de manière unique la page...
heu j'ai pas compris Smiley ohwell

j'ai un site déjà en ligne ~800,000 pages avec un fil d'ariane de type "location", mais j'ai le sentiment qu'une amélioration serait possible ..

aujourd'hui j'ai

rubrique > sous-rubrique > sous-sous-rubrique

j'aimerai rajouter un menu déroulant vertical genre

rubrique (menu rubriques niveau1) > sous-rubrique (menu rubriques niveau2) > sous-sous-rubrique (menu rubriques niveau3)

A priori il faudrait un mix de slidiing doors rollovers (http://css-tricks.com/designing-the-digg-header-how-to-download/) du jascript et pas mal de CSS ?
A priori tu connais donc la solution.

Il faut en effet qu'a chaque niveau de ton fil, tu attaches un sous-menu correspondant à ton niveau.
A partir d'un niveau as-tu un moyen de récupérer la liste des éléments du sous-menu ? (requete SQL sur une BDD qui contient ton menu par exemple) ?

Ensuite, avec ton CSS et la fonction :hover tu n'as plus qu'à afficher le sous-menu au passage de la souris sur le niveau survolé.
RACBasket a écrit :
Ensuite, avec ton CSS et la fonction :hover tu n'as plus qu'à afficher le sous-menu au passage de la souris sur le niveau survolé.
Il est préférable d'utiliser du JavaScript pour faire cela...
Laurie-Anne a écrit :
Il est préférable d'utiliser du JavaScript pour faire cela...


Ma question va peut-être paraitre triviale mais pourquoi est-il préférable d'utiliser du JavaScript ?
Salut,

RACBasket a écrit :
Ma question va peut-être paraitre triviale mais pourquoi est-il préférable d'utiliser du JavaScript ?
Parce qu'un menu déroulant pour rester accessible (je ne suis d'ailleurs pas sûr que ces deux termes soient vraiment compatibles), il doit, entre beaucoup d'autres choses, permettre la navigation sans souris (puisque tout le monde, par choix ou par nécessité, n'en dispose pas). Du coup même le :hover css ne va pas suffire car il faut également gérer le :focus et que ce dernier ne peut s'appliquer qu'à des liens et pas à des LI.
Du coup on affiche les menus déjà déroulés et seulement ensuite, via JavaScript, on les referme et on gère tous les évènements (mouseover, focus, mouseout, blur).

Je t'invite à lire La recette pour un menu déroulant accessible (Fairytells)