Mon menu à 2 niveaux passe mal !!!

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Mon menu à 2 niveaux passe mal !!!

Al Batar

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>

Publicité

Al Batar

Up :bounce:

fadenreturns

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

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

Al Batar

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:

Hermes le Messager

Breton Quiétiste

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...

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.

fadenreturns

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...

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/

Al Batar

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 % ...

Azzazel

Citation :

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

fadenreturns

Azzazel a écrit :

Citation :

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/

FORUM HardWare.fr

Programmation

HTML/CSS

Mon menu à 2 niveaux passe mal !!!

Sujets relatifs
Le menu deroulant double la hauteur de ligne de mon tableau	[Delphi] Stockage d'un mot de passe. [Résolu]
loader & afficher un menu JS avant le reste de la page ?	Afficher la source du menu suivant:
[visual c++ 6] pkoi j'ai pas le menu contextuel ???	menu htm
Menu déroulant et contenu de la page	[menu DOS] ca avance
[PHP] Liste de mots de passe à la con...	Menu déroulant, Javascript & CSS, Fonctionne sur un max de nav.
Plus de sujets relatifs à : Mon menu à 2 niveaux passe mal !!!

Page générée en 0.076 secondes