28172 sujets

CSS et mise en forme, CSS3

Menu à 3 niveaux

Pages :
Bonjour

J'ai un menu à 2 niveau qui affiche les catégories de niveau 2 après un hover sur les catégories de niveau 1.
Ma question est simple: je voudrais qu'au survole des catégories de niveau 2 apparaissent sur la droite les catégories de niveau 3.

J'ai bien essayé plusieurs choses dans le CSS avec les li li li et les li li ul mais cela n'a rien donné.

Mon site : http://www.licencedemathematiques.com/

Merci de votre aide.
Bonjour Smiley smile

Un peu d'inspiration ici devrait t'aider. Le principe c'est d'avoir des listes imbriquées ul li (ce que tu sembles avoir fait), et de décaler vers le droite la liste de 3em niveau lorsqu'un survol le 2em sous niveau.


HS : tu as un div qui traîne avant l'ouverture de ton body par contre ^^
Merci de ton aide. Je galère un truc de fou.

J'ai essayé ceci mais le troisième niveau est au "niveau" du 2ème ...

#dropmenu2  li li li{float: left;	margin: 0px; padding: 0px; width: 150px;}
#dropmenu2  li li li a, #dropmenu2  li li li a:link, #dropmenu2  li li li a:visited { background: #292929; width: 150px; float: none;text-transform: none; margin: 0px; padding: 7px 10px 7px 10px;border-bottom: 1px solid #008cef; }
#dropmenu2  li li li a:hover, #dropmenu2  li li li a:active {	background: #007dd7; padding: 7px 10px 7px 10px;}
#dropmenu2  li ul li ul {position: absolute; width: 10em; left: -999em;}


J'ai du oublier quelque chose.

Merci de m'aider c'est super sympa
Modifié par kvf300 (25 Aug 2011 - 16:58)
C'est tout bon. Merci de votre aide !!!

Si ça interesse quelqu'un j'ai déjà un menu à 2 niveaux et voila ce que j'ai rajouté:


#dropmenu2  li li li{float: left;	margin: 0px; padding: 0px; width: 150px;}
#dropmenu2  li li li a, #dropmenu2  li li li a:link, #dropmenu2  li li li a:visited { background: #292929; width: 150px; float: none;text-transform: none; margin: 0px; padding: 7px 10px 7px 10px;border-bottom: 1px solid #008cef; }
#dropmenu2  li li li a:hover, #dropmenu2  li li li a:active {	background: #007dd7; padding: 7px 10px 7px 10px;}

#dropmenu2 li ul ul{margin: -27px 0 0 170px ;}

#dropmenu2 li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}

#dropmenu2 li li:hover ul, #dropmenu2 li.sfhover ul, #dropmenu2 li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
}


j'ai juste un doute sur le fait que tout soit réellement utile ...
Bonjour,

Un peu de lecture parce qu'un menu déroulant sur 3 niveaux, c'est qu'il y a un problème d'organisation dans le site.

Et sinon, en CSS pur, c'est peine perdue. Il va falloir utiliser du JS (et en plus ça fera du bien à l'accessibilité de ton truc).
Laurie-Anne a écrit :
Bonjour,

Un peu de lecture parce qu'un menu déroulant sur 3 niveaux, c'est qu'il y a un problème d'organisation dans le site.


Merci pour l'article mais je vais garder ce menu que mes visiteurs commencent à connaître.


Et sinon, en CSS pur, c'est peine perdue. Il va falloir utiliser du JS.

Ah bon ? Pourtant j'ai l'impression d'avoir réussi ...

Laurie-Anne a écrit :

(et en plus ça fera du bien à l'accessibilité de ton truc).

C'est à dire ?
kvf300 a écrit :
Ah bon ? Pourtant j'ai l'impression d'avoir réussi ...
Tu as réussi à faire un truc qui est totalement inutilisable quand on navigue au clavier.
6 fois la touche tab et on arrive dans le 3ème niveau ... Désolé si je me trompe, je veux offenser personne je veux juste apprendre. Merci
kvf300 a écrit :
6 fois la touche tab et on arrive dans le 3ème niveau ... Désolé si je me trompe, je veux offenser personne je veux juste apprendre. Merci


Ben je crains que tu ne te trompes... J'arrive sur ta page, premier tab je suis dans "Name", deuxième je suis dans "Email_address", troisième... heu. Où suis-je ? Pas d'outline, rien qui m'indique où mon curseur est. Il faut toujours garder un truc du genre 
:focus { 
outline : 1px dotted #fff;
}
afin d'aider l'utilisateur.
Je ne sais pas comment tu calcules tes 6 tabs mais je n'ai même pas atteint ton menu.
Et il y a quelque part un lien href=javascript:void(0), bouh, pas beau =P (je l'ai vu dans la barre d'état pendant que je errais avec mon clavier)

EDIT : d'ailleurs, il faudrait doubler en :focus tous les :hover de ton menu.
Modifié par AkaiKen (26 Aug 2011 - 11:29)
kvf300 a écrit :
Moi il me faut 6 tab mais bon ...


Quelle est exactement ta méthode ?

EDIT : ok, j'y arrive, mais avec 10 tabs et sans savoir à aucun moment où je suis et ce que je fais à moins d'avoir les yeux rivés sur la barre d'état.
Modifié par AkaiKen (26 Aug 2011 - 11:48)
Salut,

Moi aussi, il m'a fallu 6 tab. Sauf que le menu ne se déroule pas, on a juste l'url qui s'affiche en bas dans la barre de status. Donc à moins d'être devin Smiley ohwell .

Détail bizarre au passage, quand on shift-tab depuis un lien sous le player flash, on reste coincé sur le bouton lecture et on ne peux remonter qu'en refaisant une boucle entière.

Sinon, désolé, j'ai pas trop envie de recevoir ton guide (je hais ce genre de popin).
Modifié par Florian_R (26 Aug 2011 - 11:48)
Ok merci pour toutes ces indications.
Disons que mes visiteurs utilisent plus la souris que le clavier pour naviguer sur notre site.
Pour le Popin, pas de soucis, tu n'es pas ma cible Smiley cligne
InpIxelItrust a écrit :
J'ai pas vu de popin (mais j'ai adblock ^^ )

Sinon pour un menu accessible au clavier à 3 niveaux, il y a superfish.

Merci Stéphanie je vais aller voir de ce côté là.
Je suis pas sûr que Adblock bloque les popin. Je vais vérifier. Smiley cligne
Je viens d'aller sur leur site (http://www.popupdomination.com/ pour les curieux, je link pas, faut pas déconner). T'as vraiment payé pour ça Smiley lol Smiley lol ?
InpIxelItrust a écrit :
J'ai pas vu de popin (mais j'ai adblock ^^ )

Sinon pour un menu accessible au clavier à 3 niveaux, il y a superfish.


Pas sûre qu'il y ait besoin de tout changer... Déjà, mets des :focus en plus des :hover dans ton menu actuel, et on voit ce que ça donne ?
Florian_R a écrit :
Je viens d'aller sur leur site (http://www.popupdomination.com/ pour les curieux, je link pas, faut pas déconner). T'as vraiment payé pour ça Smiley lol Smiley lol ?

Oui.

Ok je vais essayer ça cet après midi AkaiKen

Je vous tiens au courant.
Pages :
Sujet clos
Aller à