OVH Cloud OVH Cloud

Horizontal javascript and CSS menu

18 réponses
Avatar
polo
Bonjour =E0 tous
je recherche =E0 avoir une configuration =E0 l'horizontale pour les menus
et sous menus.
En ce qui concerne le css, tout se passe bien (bien que mon code ne
soit pas tres propre, je le reconnais) sous firefox.

par contre, en ce qui concerne le javascript pour internet explorer, je
n'arrive pas a m'en sortir.
j'ai bien essay=E9 de faire des recherches mais j'avoue que mon niveau
est trop limit=E9.
le but etant d'obtenir le meme resultat sous explorer que sous firefox.

je vous envoie le code de la page que j'ai faite pour le menu.
n'hesitez pas =E0 me donner des commentaires quant =E0 comment faire pour
obtenir le meme resultat sur explorer avec le javascript que sur
firefox avec le css pur.

Merci

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir=3D"{S_CONTENT_DIRECTION}">
<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html;
charset=3D{S_CONTENT_ENCODING}">
<meta http-equiv=3D"Content-Style-Type" content=3D"text/css">
<title</title>

<style type=3D"text/css">
/*-------------------------------------------------------------*/

ul#menu li ul{
display:none;
}

ul#menu li:hover>ul{
/*position:relative;*/
display:block;
/*margin: 1;*/
/*left: 15;*/
width:736px;
height: 25;
padding-top:10px;
padding:7px;
}

ul#menu{
margin:0px;
padding:0px;
list-style:none;
width:750;
/*background:#5f7eb3;*/
background:#3c5279;
float:left;
font:0.9em Tahoma, Verdana, Helvetica, sans-serif;
}

/*
ul#menu hr{
margin-right: 4px;
margin-left: 4px;
}
*/

ul#menu li{
float:left;
display:block;
padding:2px 1px;
}

ul#menu li.first{
padding-left:2px;
}

ul#menu li.last{
padding-right:2px;
}

ul#menu li a{
display:block;
padding:2px 6px;
/*border:1px solid #CCCCCC;*/
color:#FFFFFF;
text-decoration:none;
}

ul#menu li a:hover{
border-top-color:#F0F0F0;
border-left-color:#F0F0F0;
border-right-color:#999999;
border-bottom-color:#999999;
}

ul#menu ul{
position:absolute;
/*position:relative;*/
background:#CCCCCC;
/*background:#FFFFFF;*/
list-style:none;
margin:0px 0px;
padding:0px;
/*width:400px;*/
z-index:1;
}

ul#menu ul.un{
margin:2px -2px;
}
ul#menu ul.deux{
margin:2px -84px;
}
ul#menu ul.trois{
margin:2px -166px;
}

ul#menu ul ul{
top:15px;
left:10px;
z-index:2;
}

ul#menu ul li{
position:relative;
float:none;
margin:0px;
padding:0px;
_display:inline;
}

ul#menu ul li a{
display:inline;
margin:0px;
padding:0px;
width:400px;
border:none;
color:#000000;
font:12px Tahoma, Verdana, Helvetica, sans-serif;
font-weight:bold;
}

ul#menu ul li a span{
display:inline;
width:400px;
_width:500px;
margin:0px 2px;
border:none;
cursor:hand;

}
ul#menu ul li a.next span{
}
ul#menu ul li a.next:hover span{
background-position: -160px 50%;
}

ul#menu ul li a:hover span{
background-color:#000099;
color:#FFFFFF;
border:none;
background-position: -306px 0;}

ul#menu ul li.first{
padding-left:0px;
display: inline;
}

ul#menu ul li.first a{
padding-top:2px;
}

ul#menu ul li.last{
padding-right:0px;
}

ul#menu ul li.last a{
padding-bottom:2px;
}

ul#newmenu li {
display: inline;
}

/*-------------------------------------------------------------*/
</style>

<script type=3D"text/javascript">
function hover(obj){
if(document.all){
UL =3D obj.getElementsByTagName('ul');
if(UL.length > 0){
sousMenu =3D UL[0].style;
if(sousMenu.display =3D=3D 'none' || sousMenu.display =3D=3D ''){
sousMenu.display =3D 'block';
}else{
sousMenu.display =3D 'none';
}
}
}
}

function setHover(){
LI =3D document.getElementById('menu').getElementsByTagName('li');
nLI =3D LI.length;
for(i=3D0; i < nLI; i++){
LI[i].onmouseover =3D function(){
hover(this);
}
LI[i].onmouseout =3D function(){
hover(this);
}
}
}
</script>

</head>


<body onLoad=3D"setHover()">

<a name=3D"top"></a>

<!-- menu customis=E9 ******************************* -->
<ul id=3D"menu">
<li class=3D"first">
<a href=3D"#"><b>Menu 1&nbsp;&nbsp;|</b></a>

<ul id=3D"newmenu" class=3D"un">
<li><a href=3D"#"><span>Menu 1.1</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 1.2</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 1.3</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 1.4</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#" class=3D"disabled"><span>Menu 1.5</span></a></li>
</ul>
</li>

<li>
<a href=3D"#"><b>Menu 2&nbsp;&nbsp;|</b></a>
<ul id=3D"newmenu" class=3D"deux">
<li><a href=3D"#"><span>Menu 2.1</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 2.2</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 2.3</span>&nbsp;&nbsp;|</a></li>
<li class=3D"last"><a href=3D"#" class=3D"disabled"><span>Menu
2=2E4</span>&nbsp;&nbsp;|</a></li>
<li class=3D"first"><a href=3D"#"><span><b>Menu
2=2E5</b></span></a></li>
</ul>
</li>

<li>
<a href=3D"#"><b>Menu 3&nbsp;&nbsp;|</b></a>
<ul id=3D"newmenu" class=3D"trois">
<li><a href=3D"#"><span>Menu 3.1</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 3.2</span>&nbsp;&nbsp;|</a></li>
<li><a href=3D"#"><span>Menu 3.3</span>&nbsp;&nbsp;|</a></li>
<li class=3D"last"><a href=3D"#" class=3D"disabled"><span>Menu
3=2E4</span>&nbsp;&nbsp;|</a></li>
<li class=3D"first"><a href=3D"#"><span><b>Menu
3=2E5</b></span></a></li>
</ul>
</li>

</ul>
<br />
<br />

</body>
</html>

8 réponses

1 2
Avatar
Bertrand B
pour le csshover.htc, je l'ai essayé hier soir et ca marche, mais
c'est un peu lourd, et comme le javascript de Stephane marche
exactement de la meme facon, je le prefere.


Je ne veux pas vendre "ma soluce" si réelment le csshover ne corrige pa s
les pb du IE Mac c'est évidement une raison qui peut pousser à cherch er
autre chose. (spéhane les popup de
http://perso.wanado.fr/bertrand.belguise ne marche pas sous IE mac ?)


Mais dire que 90 lignes qui ne sont chargée que par IE je ne trouve pas
ça lourd du tout. Effectivement il faut rajouter une ligne dans le css
mais c'est toujours du léger.

Je ne dirai pas la même chose d'IE7 (http://dean.edwards.name/IE7/) que
je n'ai pas réssi à implémenter sur mon site.

Avatar
ASM

spéhane les popup de
http://perso.wanado.fr/bertrand.belguise ne marche pas sous IE mac ?)


Rassure toi : y rien qui marche sur ce site avec mon IE Mac
y a un truc qui a l'air de tourner en boucle en fond et ... page blanche

[snip]
Je ne dirai pas la même chose d'IE7 (http://dean.edwards.name/IE7/) que
je n'ai pas réssi à implémenter sur mon site.


Chez Wanadoo tu vas avoir du fil à retordre.
Comme IE7 se refère pour tout ce qu'il fait au root du site
par l'url relative "/" truc = "/machin/chouette.htc"
et que chez wamamoudug'nou le root est "/bertrand.belguise/"
et donc ça devient truc = "/bertrand.belguise/machin/chouette.htc"
tu peux te rettaper une bonne partie des scripts.

J'ai abandonné, d'autant que sans PC ... pas fastoche de juger.

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
polo
YESSSSSS !!!!
Merci Stephane pour le JS, c'est exactement ce que je recherchais !

Ce que ca apporte ? dans certaines conditions, un confort d'utilisation
du menu, c'est a dire que l'utilisateur pas doué avec sa souris peut
dépasser un peu de la zone de hover et sa selection de sous menu
restera quand même apparente.
je sais, c'est un peu chipoter mais sur un menu horizontal, c'est pas
si mal que ca.
Je ne sais pas si je vais implémenter cette solution, mais c'est
vraiment super de l'avoir.

vraiment merci beaucoup. Il ne me reste qu'a étudier ton code pour en
comprendre le fonctionnement. comme je te dis, je ne connais pas encore
le js...

Bertrand, je ne savais pas que c'etait uniquement IE qui chargeait le
code htc. C'est bon à savoir car ca peut servir. j'avoue que si
Stephane ne m'avait pas si gentillement aidé, j'aurais été "coincé"
avec le htc, et encore, sans cette dernière fonctionnalité de menu
qui "colle".

Stéphane, juste une autre petite question, si jamais je décide
d'implémenter mon menu avec cette fonctionnalité de sous menu qui
"colle", est ce que c'est possible d'utiliser le JS aussi sur Firefox
pour avoir cette fonctionnalité ?

Merci encore.
Avatar
ASM

Stéphane, juste une autre petite question, si jamais je décide
d'implémenter mon menu avec cette fonctionnalité de sous menu qui
"colle", est ce que c'est possible d'utiliser le JS aussi sur Firefox
pour avoir cette fonctionnalité ?


oui et la méthode est indiquée dans le code

c'st même écrit en français, il n'y a même pas besoin de connaître le JS :-)

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ASM

Ce que ca apporte ? dans certaines conditions, un confort d'utilisation
du menu, c'est a dire que l'utilisateur pas doué avec sa souris peut
dépasser un peu de la zone de hover et sa selection de sous menu
restera quand même apparente.


à mon idée on ne devrait avoir ce sous-menu fixe que sur la page de son
menu.

Exemple :
On clique Menu 2
on arrive sur la page-tete-de-chapitre 2
le sous-menu du chapitre 2 est affiché en permanence
sauf quand on balade la souris sur les autres menus bien évidemment
au sorir du passage sur les menus, le sous-menu de cette page 2 se
réaffiche.

Voilà comment je vois l'ergonomie de la chose.

Question :
As-tu commencé à regarder ce menu avec un div rempli et placé dessous ?
Tu vas peut-être être surpris du résultat ? !

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
polo
Oui je vois ce que tu veux dire pour le sous menu. Et tu as
probablement raison. je n'ai pas encore la réponse.

Pour le div rempli et placé en dessous , je n'ai pas encore essayé.
mais il me semble que ca ne devrait pas poser de probleme s'il est
correctement positionné, et puis si mon menu déborde sur la div
(c'est probablement ce que tu veux dire avec ta question) et bien je
mettrai 3 ou 4 <br /> et ca devrait passer.

c'est aussi pour ca que j'aurais voulu un ous menu affiché en
permanence, pour ne pas avoir cet espace vide entre mon menu principal
et le début du div de contenu.

Avant que tu ne dises que je suis un âne complet, je réponds à ma
question de l'utilisation du JS sous FF : il suffit d'enlever la
condition if(ie) bien entendu, et ca marche parfaitement sous FF comme
sous IE.

je passe au reste du code.
Avatar
ASM

Avant que tu ne dises que je suis un âne complet, je réponds à ma
question de l'utilisation du JS sous FF :


trop tard !

et tu as dû louper le message qui en parlait :-)


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
polo
ah oui ca y est, je l'ai retrouvé... :-)
1 2