28173 sujets

CSS et mise en forme, CSS3

[résolu]Menu qui ne conserve pas le focus

Bonjour

J'ai crée un menu tout fonctionne sauf quand je clique sur un lien du menu il ne conserve pas le focus.
Voici mon code CSS :

ul.MenuBarHorizontal {
cursor:default;
font-size:100%;
list-style-type:none;
margin:0pt;
padding:0pt;
width:auto;
}
ul.MenuBarActive {
z-index:1000;
}
ul.MenuBarHorizontal li {
cursor:pointer;
float:left;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:100%;
font-weight:bolder;
list-style-type:none;
margin:0pt;
padding:0pt;
position:relative;
text-align:left;
width:auto;
}
ul.MenuBarHorizontal ul {
cursor:default;
font-size:100%;
left:-1000em;
list-style-type:none;
margin:0pt;
padding:0pt;
position:absolute;
width:8.2em;
z-index:1020;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {
left:auto;
}
ul.MenuBarHorizontal ul li {
width:8.2em;
}
ul.MenuBarHorizontal ul ul {
margin:-5% 0pt 0pt 95%;
position:absolute;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible {
left:auto;
top:0pt;
}
ul.MenuBarHorizontal ul {
border:1px solid #CCCCCC;
}
ul.MenuBarHorizontal a {
background-color:#999999;
color:#333333;
cursor:pointer;
display:block;
padding:0.5em 0.75em;
text-align:center;
text-decoration:none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus, ul.MenuBarHorizontal a:active {
background-color:#333333;
color:#FFFFFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible {
background-color:#333333;
color:#FFFFFF;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
background-image:url(SpryMenuBarDown.gif);
background-position:95% 50%;
background-repeat:no-repeat;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu {
background-image:url(SpryMenuBarRight.gif);
background-position:95% 50%;
background-repeat:no-repeat;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover {
background-image:url(SpryMenuBarDownHover.gif);
background-position:95% 50%;
background-repeat:no-repeat;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover {
background-image:url(SpryMenuBarRightHover.gif);
background-position:95% 50%;
background-repeat:no-repeat;
}
ul.MenuBarHorizontal iframe {
position:absolute;
z-index:1010;
}
ul.MenuBarHorizontal li.MenuBarItemIE {
background:#FFFFFF none repeat scroll 0%;
display:inline;
float:left;
}
#MenuBar1 #menu_1 {
border-bottom:5px solid #FFFFFF;
}
#MenuBar1 #menu_2 {
border-bottom:5px solid #FFFFFF;
}
#MenuBar1 #menu_3 {
border-bottom:5px solid #FFFFFF;
}
#MenuBar1 #menu_4 {
border-bottom:5px solid #FFFFFF;
}
#MenuBar1 #menu_5 {
border-bottom:5px solid #FFFFFF;
}


et le code html :
<body>
<ul id="MenuBar1" class="MenuBarHorizontal">
  <li id="menu_1"><a href="#">menu 1</a> </li>
  <li id="menu_2"><a href="#">menu 2</a></li>
  <li id="menu_3"><a href="#">menu 3</a> </li>  
  <li id="menu_4"><a href="#">menu 4</a></li>
  <li id="menu_5"><a href="#">menu 5</a></li>
</ul>



Merci d'avance pour votre aide
Modifié par jaribu (15 Jan 2008 - 22:49)
jaribu a écrit :
Bonjour

J'ai crée un menu tout fonctionne sauf quand je clique sur un lien du menu il ne conserve pas le focus.

Pas bien compris ce que tu entends par là...

En tout cas, ce que je remarque c'est que le focus (navigation au clavier notamment) ne se fait pas correctement au delà du premier lien. Et apparemment c'est ton Javascript qui pose problème.
en fait je veux que quand on clique sur menu 1 le background reste colorisé d'une autre couleur pour facilité le repérage dans le menu, ce qu'il fait très bien au survol et pareillement pour la navigation au au clavier.

Donc pour toi c'est le javascript qui pose problème ? C'est ce que je pense mais j'aimerais bien avoir confirmation.
jaribu a écrit :
en fait je veux que quand on clique sur menu 1 le background reste colorisé d'une autre couleur pour facilité le repérage dans le menu

Tu veux dire que quand je suis sur une page de la rubrique Z, l'item de menu correspondant à la rubrique Z est mis en valeur visuellement pour faciliter le repérage dans le site?

Ben ça n'a absolument rien à voir avec le hover, le focus, le active, etc. Le navigateur ne sait pas quel élément du menu correspond à la page ou rubrique en cours (il ne sait même pas que le menu est le menu...), donc ça risque d'être dur de lui demander via CSS de mettre une couche de peinture supplémentaire pour «le lien qui correspond à la page en cours». Smiley cligne

Solution: marquer ce lien dans le code HTML, par une classe par exemple.

<ul>
	<li>Accueil</li>
	<li>Machin</li>
	<li class="en_cours">Truc</li>
	<li>Bidule</li>
</ul>

Bien sûr, ça demande quelques subtilités de codage pour un site dynamique. Pas toujours évident à mettre en place si ça n'est pas prévu par le CMS utilisé par exemple (et même quand c'est prévu, c'est pas évident...).

jaribu a écrit :
ce qu'il fait très bien au survol et pareillement pour la navigation au au clavier.

Ben non justement, la navigation au clavier déconne à cause de ton Javascript (sur la page de test que tu indiques). Ça déconne différemment avec Firefox et Opera d'ailleurs, mais ça déconne dans les deux cas.
jaribu a écrit :
Ce que je veux obtenir c'est simplement celà : http://css.alsacreations.com/xmedia/exemples/menunew/menu2.html
et il n'y pas de marquage suplémentaire ou j'ai loupé un détail

Il n'y a pas de marquage supplémentaire, mais il n'y a pas non plus d'indication de la page en cours (de toute façon il n'y a qu'une seule page et tous les liens pointent vers la page en cours...).

La seule chose qui ressemble à un marquage de la page ou rubrique en cours c'est le fait qu'avec certains navigateurs, quand je clique sur un lien et que je reviens à la page (bouton page précédente), le lien sur lequel j'avais cliqué a gardé l'état :active (lien cliqué ou validé). Dans le cas d'une page de test où tous les liens pointent vers "#", un lien cliqué gardera l'état :active avec certains navigateurs comme Firefox.
Mais c'est un effet plutôt anecdotique, pas vraiment reproductible, etc.

Je crois que j'ai toujours du mal à voir ce que tu veux faire. Smiley biggol
Autant pour moi à force de travailler sur mon menu sans le lier a des pages réelles... j'en ai inventé des fonctions Smiley eek

Merci de m'avoir remis sur le droit chemin Smiley cligne
Sujet clos
Aller à