Mon menu à 2 niveaux passe mal !!!

Marsh Posté le 24-09-2003 à 15:51:21

Bonjour à tous !

Voila ce sur quoi je travaille en ce moment : un menu à double niveau, façon celui de la page d'accueil de Macromedia : www.macromedia.com...

J'ai un code qui commence à ressembler à quelque chose, mais il y a encore quelques défauts :

IE5 ne reconnaît pas les propriétés de padding des CSS !!!
Mozilla gère les marges différemment d'IE, et considère qu'elles sont extérieures, ce qui entraîne un rendu un peu bizarre...

Pourriez-vous m'aider à y voir un peu plus clair, et/ou me proposer des améliorations ? Merci beaucoup !

Voici le code :

Code :

<html>
<head>
<script language="JavaScript">
<!--
function show(id) {
var e=document.getElementById(id) ;
var i=1 ;
while ((menu=document.getElementById(i)) && (sousMenu=document.getElementById("sousMenu"+i))) {
if (i==parseInt(id)) {
menu.style.backgroundColor="orange" ;
sousMenu.style.visibility="visible" ;
}
else {
menu.style.backgroundColor="navy" ;
sousMenu.style.visibility="hidden" ;
}
i++ ;
}
}
function hide(id) {
var e=document.getElementById(id) ;
e.style.backgroundColor="navy" ;
}
//-->
</script>
<style type="text/css">
<!--
.menu {position : absolute; top : 1px ; right : 1px ;
width : 80% ;
text-align : center ;
font-weight : bold ;
/* border : solid 4px red */}
.ligne1 {border-style : solid ; border-width : 4px ; border-bottom-width : 0px ; border-color : navy ;
color : white ; background-color : navy ;
font-variant : small-caps}
.item1 {display : inline ;
padding-left : 10px ; padding-right : 10px ;
/* border : solid orange 1px ; */
margin-left : 20px ; margin-right : 20px}
.item2 {display : inline ;
padding-left : 10px ; padding-right : 10px ;
margin-left : 10px ; margin-right : 10px ;}
.ligne2 {position : absolute ; top : 100% ;
width : 100% ;
border-style : solid ; border-width : 4px ; border-color : navy ;
color : navy ; background-color : orange ;
padding-bottom : 2px}
.ligne1 span , .ligne2 span {visibility : hidden}
#sousMenu1 {visibility : visible}
#sousMenu2 , #sousMenu3 , #sousMenu4 , #sousMenu5 , #sousMenu6 {visibility : hidden}
-->
</style>
</head>
<body>
<div class="menu">
<div class="ligne1">
<div id="1" class="item1" onmouseover="show(this.id)" style="background-color : orange ;"> Menu 1 </div>
<div id="2" class="item1" onmouseover="show(this.id)"> Menu 2 </div>
<div id="3" class="item1" onmouseover="show(this.id)"> Menu 3 </div>
<div id="4" class="item1" onmouseover="show(this.id)"> Menu 4 </div>
<div id="5" class="item1" onmouseover="show(this.id)"> Menu 5 </div>
<div id="6" class="item1" onmouseover="show(this.id)"> Menu 6 </div>
</div>
<div id="sousMenu1" class="ligne2">
<div class="item2"> Sous-menu 1 du menu 1 </div>
|<div class="item2"> Sous-menu 2 du menu 1 </div>
|<div class="item2"> Sous-menu 3 du menu 1 </div>
</div>
<div id="sousMenu2" class="ligne2">
<div class="item2"> Sous-menu 1 du menu 2 </div>
|<div class="item2"> Sous-menu 2 du menu 2 </div>
|<div class="item2"> Sous-menu 3 du menu 2 </div>
</div>
</div>
</body>
</html>

Reply

Marsh Posté le 24-09-2003 à 15:51:21

Reply

Marsh Posté le 24-09-2003 à 18:04:55

Up :bounce:

Reply

Marsh Posté le 24-09-2003 à 18:24:26

http://www.magnin-sante.ch/journal [...] rpoint.htm

---------------
mon blog : http://www.magnin-sante.ch/journal/

Reply

Marsh Posté le 24-09-2003 à 19:51:04

Sobre et expéditif comme réponse !

Quelques remarques, néanmoins :

la largeur du menu est fixe ;
si la page s'affiche dans une fenêtre de taille réduite (soit que l'écran soit petit - peu fréquent actuellement - soit que la fenêtre ait été redimensionnée), une partie du menu (à gauche) peut devenir inaccessible...

Néanmoins, ta base est meilleure que la mienne - ne serait-ce qu'à cause de l'emploi de listes : j'avais essayé une structure de ce type, mais sans y parvenir !

Je vais donc étudier soigneusement ton code...

Merci !
:hello:

Reply

Marsh Posté le 24-09-2003 à 19:55:30

Al Batar a écrit :

Sobre et expéditif comme réponse !

Quelques remarques, néanmoins :

la largeur du menu est fixe ;
si la page s'affiche dans une fenêtre de taille réduite (soit que l'écran soit petit - peu fréquent actuellement - soit que la fenêtre ait été redimensionnée), une partie du menu (à gauche) peut devenir inaccessible...

Néanmoins, ta base est meilleure que la mienne - ne serait-ce qu'à cause de l'emploi de listes : j'avais essayé une structure de ce type, mais sans y parvenir !

Je vais donc étudier soigneusement ton code...

Merci !
:hello:

Concernant ton code JS, sinon, fait des fonctions en français (au lieu de show(id), fait plutôt affiche(id)), ça donne tout de suite bcp plus envie de s'investir et d'aider, sisi.

Reply

Marsh Posté le 24-09-2003 à 20:09:56

Al Batar a écrit :

Sobre et expéditif comme réponse !

Quelques remarques, néanmoins :

la largeur du menu est fixe ;
si la page s'affiche dans une fenêtre de taille réduite (soit que l'écran soit petit - peu fréquent actuellement - soit que la fenêtre ait été redimensionnée), une partie du menu (à gauche) peut devenir inaccessible...

Néanmoins, ta base est meilleure que la mienne - ne serait-ce qu'à cause de l'emploi de listes : j'avais essayé une structure de ce type, mais sans y parvenir !

Je vais donc étudier soigneusement ton code...

Merci !
:hello:

Merci, c'est bien gentil. Mais sache que les liste c'est vraiment un galère pas possible. Chaque navigateurs les affiches comme il veut.

Ce menu doit marcher un peu partout. Mais je doute que ça marche avec IE5 Mac ... mais comme sa mort est proche.

---------------
mon blog : http://www.magnin-sante.ch/journal/

Reply

Marsh Posté le 25-09-2003 à 10:21:28

J'ignorais que l'usage des listes posait tant de problèmes ! Leur gros avantage est néanmoins de préserver la structure des menus, ce qui est bien pour les navigateurs en mode texte ou ceux dont le support JavaScript est désactivé...

Ceci dit, j'ai quelques soucis avec la largeur de ton menu : je n'arrive pas (encore) à obtenir quelque chose de potable avec des valeurs en % ...

Reply

Marsh Posté le 26-09-2003 à 11:45:38

Citation :

Merci, c'est bien gentil. Mais sache que les liste c'est vraiment un galère pas possible. Chaque navigateurs les affiches comme il veut.

Ce menu doit marcher un peu partout. Mais je doute que ça marche avec IE5 Mac ... mais comme sa mort est proche.

Je ne rencontre pas de problème particulier avec les listes ... et elles sont en plus sémantiquement plus correctes que les div !
Sous IE5 Mac (quelle horreur ce truc) les listes son assez bien supportées, ce menu :
http://openweb.eu.org/articles/menu_universel/
fonctionne très bien sous la plupart des navigateurs ... y compris IE5 MAc

Message édité par Azzazel le 26-09-2003 à 11:46:13

Reply

Marsh Posté le 26-09-2003 à 19:20:35

Azzazel a écrit :

Citation :

Merci, c'est bien gentil. Mais sache que les liste c'est vraiment un galère pas possible. Chaque navigateurs les affiches comme il veut.

Ce menu doit marcher un peu partout. Mais je doute que ça marche avec IE5 Mac ... mais comme sa mort est proche.

Je ne rencontre pas de problème particulier avec les listes ... et elles sont en plus sémantiquement plus correctes que les div !
Sous IE5 Mac (quelle horreur ce truc) les listes son assez bien supportées, ce menu :
http://openweb.eu.org/articles/menu_universel/
fonctionne très bien sous la plupart des navigateurs ... y compris IE5 MAc

Ouais il marche avec IEmac. Mais il sont limités en profondeur et le Javascript est bcp trop compliqué.

Et notemment y a des trucs un peu inutil dedans comme les span en display:none. De toute façon les lecteurs d'écran ne les lisent pas.

Le menu que j'ai proposé ne fonctionnne pas à cause des CSS mais autrement a le JS joue.

Menfin ces tà discuter tout ça.

---------------
mon blog : http://www.magnin-sante.ch/journal/

Reply

Mon menu à 2 niveaux passe mal !!!

Sujets relatifs:

Leave a Replay