Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript script de menu perso qui marche... pas top

script de menu perso qui marche... pas top

8 réponses
Avatar
bruno
bonjours, je me suis cr=E9=E9 un petit script de menu, il marche tres(?)
bien sous IE, mais le pb sous firefox, c'est que je suis oblig=E9
d'aligner le "sous menu" a doite, sinon le reste de ma page s'aligne a
sa droite (au lieu de se positionner en dessous)
je fait confiance a gecko, donc, j'ai fait un petit caca, mias ou?


le script est dans le HTML, le CSS a sa suite...
HELP!!

<body >
<div id=3D"div_menu">
<ul id=3D"menu" class=3D"listeVide">
<li class=3D"BlockMenu" id=3D"titre" onMouseOver=3D'sous_menu("0");

document.getElementById("titre").style.background=3D"#222222";

document.getElementById("menuConsolide").style.background=3D"#993300";

document.getElementById("menuDivers").style.background=3D"#993300";

document.getElementById("menuElement").style.background=3D"#993300";'>=
Service
: [var.service] </li>
<li class=3D"BlockMenu" id=3D"menuElement" onMouseOver=3D'sous_menu("1");

document.getElementById("menuElement").style.background=3D"#CC0033";

document.getElementById("titre").style.background=3D"#000000";

document.getElementById("menuConsolide").style.background=3D"#993300";

document.getElementById("menuDivers").style.background=3D"#993300"'>
MAJ par &eacute;l&eacute;ments</li>
<li class=3D"BlockMenu" id=3D"menuConsolide" onMouseOver=3D'sous_menu("2"=
);

document.getElementById("menuConsolide").style.background=3D"#CC0033";

document.getElementById("titre").style.background=3D"#000000";

document.getElementById("menuElement").style.background=3D"#993300";

document.getElementById("menuDivers").style.background=3D"#993300"'>MAJ
consolid&eacute;e </li>
<li class=3D"BlockMenu" id=3D"menuDivers" onMouseOver=3D'sous_menu("3");

document.getElementById("menuDivers").style.background=3D"#CC0033";

document.getElementById("titre").style.background=3D"#000000";

document.getElementById("menuConsolide").style.background=3D"#993300";

document.getElementById("menuElement").style.background=3D"#993300"'>
Divers</li>
</ul>
</div>
<div id=3D"div_sousMenu">
<ul class=3D"listeVide">
<div style=3D"float:right ">
<div id=3D"TrSousMenu" >
<!-- va etre remplit par Javascript -->
&nbsp;
</div>
</div>
</ul>
</div>

<!-- affichage du resultat du template -->
[onload;file=3D[var.page].html]

</body>
</html>





<script language=3D"javascript">
function sous_menu(id){
if (id =3D=3D "0"){
document.getElementById("TrSousMenu").innerHTML =3D '<li
class=3D"Block"><a href=3D?todo=3DchoixDuSdum class=3D"lienBox" >Changer de
service</a></li>'
} else if (id =3D=3D "1"){
document.getElementById("TrSousMenu").innerHTML =3D '<li
class=3D"Block"><a href=3D?todo=3DMenuCO class=3D"lienBox" >CO</a></li> <li
class=3D"Block"><a href=3D?todo=3DmenuAct class=3D"lienBox" >act</a></li> <=
li
class=3D"Block"><a href=3D?todo=3DmenuCO class=3D"lienBox" >...</a></li>';
} else if (id =3D=3D "2") {
document.getElementById("TrSousMenu").innerHTML =3D '<li
class=3D"Block"><a href=3D?todo=3DmenuCO class=3D"lienBox" >CO</a></li> <li
class=3D"Block"><a href=3D?todo=3DmenuCompetences class=3D"lienBox"
>competences</a></li> <li class=3D"Block"><a href=3D?todo=3Dmenu... class=
=3D"lienBox" >...</a></li>';
}else if (id =3D=3D "3") {
document.getElementById("TrSousMenu").innerHTML =3D '<li
class=3D"Block"><a
href=3Dhttp://localhost/nouveau_test_ecomed/tests/test.php
class=3D"lienBox" >PAge de test!</a></li>';
}
}
</script>

--------------------
et un extrait du CSS :


#div_menu {
font-size:20px;
font-weight: bold;
background-color: #808080;
height:25px;
border: 3px yellow;
}

#menu {
color: #FFFFFF;
}
#sous_menu {
margin-right:15px;

font-size: 18px;
width: 100%;
}
#div_sousMenu {
background-color:#FFFFFF;
color:#CCCCCC;
height:25px;
border: 3px cyan;
}

#menu_gauche {
float: left;
background-color:#000000;
color:#FFFFFF;
width:204px;
text-align:left;
border: 3px solid red;
}
Signaler un problème avec ce contenu

8 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
bruno
bon, c'est un peu long, donc j'explique...

en fait j'ai une balise div :
<div id="TrSousMenu" >
<!-- va etre remplit par Javascript -->
</div>
c'est ici que va etre inséré le code html par un inner HTML,
declenché lors du survol d'une des rubriques principales...
avant, j'utilisait un tableau, et je collait dans chaque case un lien,
et ca marchait...
...pas non plus, a chaque modif(survol), firefox recréait une case
dans la case conteneur...
Avatar
ASM
bruno wrote:
bon, c'est un peu long, donc j'explique...


d'autant que tous les styles background ... qui délaient
(pourquoi pas dans une fonction ?)

en fait j'ai une balise div :
<div id="TrSousMenu" >
<!-- va etre remplit par Javascript -->
</div>
c'est ici que va etre inséré le code html par un inner HTML,
declenché lors du survol d'une des rubriques principales...


Mieux vaudrait avoir un ou des divs avec le/les sous-menus
puis les faire apparaître par un changement de leur(s) classe(s)
au survol du menu (en profiter pour y glisser le bon background ?)

avant, j'utilisait un tableau, et je collait dans chaque case un lien,
et ca marchait...
...pas non plus, a chaque modif(survol), firefox recréait une case
dans la case conteneur...



si çà peut te servir :
http://perso.wanadoo.fr/stephane.moriaux/truc/jouer_avec_divs.htm
Comme c'est une page de tests persos en travaux ne pas me dire
"le truc là y marche pô" -> je sais !
Se contenter
- du bouton : Enlever Tout
- puis du menu Placer un Div
qui fonctionnent
(les liens d'échanges de positions fonctionnent aussi)

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
bruno
oauis... comme t'a du le voir avec ma methode, je suis un peu (beacoup)
newbee...
j'ai pas tout compris ton code, mais l'idée c'est :
-tu crée tous tes div, et tu les affche ou pas...
y'a pas un attribu hrtml qui gere ca (genre type=hidden pour les
formulaire)??
ce serait plus simple non?
merci de ta reponse, je m'y mettrait plus a fonjd p^lus tard... :)
Avatar
ASM
bruno wrote:
oauis... comme t'a du le voir avec ma methode, je suis un peu (beacoup)
newbee...
j'ai pas tout compris ton code, mais l'idée c'est :


le pb est que dans ton brouillamini, je n'arrive pas à voir où est le
code qui fait qquechose (de ce que tu dis)

-tu crée tous tes div, et tu les affche ou pas...
y'a pas un attribu hrtml qui gere ca (genre type=hidden pour les
formulaire)??


c'est bien ce que je propose

ce serait plus simple non?


tu crées tes menus ET sous menus avec leurs css associées
et en vérifie tout l'affichage comme tu les veux
(sans hidden)

merci de ta reponse, je m'y mettrait plus a fonjd p^lus tard... :)


puis tu passes en css à { display: none; }
tout ce que tu ne veux pas voir

pour voir un des divs (ex: <div id='ssMenu_1'> )
onmouseover="var m = document.getElementById('ssMenu_1').style;
m.display = m.display==''? 'block' : '';"
et
<div id="ssMenu_1"
onmouseout="var m = document.getElementById('ssMenu_1').style;
m.display = m.display==''? 'block' : '';">

qques pistes de menus :
http://docs.mandragor.org/files/Web_standards/Openweb_fr/CSS/Initiation_au_positionnement_CSS_3_position_absolue_et_fixe.htm
http://www.openweb.eu.org/articles/menu_universel/
http://css.alsacreations.com/Galeries-de-menus-en-CSS/
http://css.alsacreations.com/Construction-de-menus-en-CSS/
http://css.alsacreations.com/Construction-de-menus-en-CSS/Faire-un-menu-avec-onglets-en-CSS-avec-before-after
http://www.openweb.eu.org/openwebgroup/demarche_accessibilite/
http://www.framasoft.net/article3589.html
http://www.webmaster-hub.com/lofiversion/index.php/t3905.html

bases javascript :
en pas français :
http://jibbering.com/faq/
en français :
http://lamscours-java.epfl.ch/2004/howtos/selfhtml/te.htm



--
Stephane Moriaux et son [moins] vieux Mac

Avatar
ASM
bruno wrote:
comme t'a du le voir avec ma methode, je suis un peu (beacoup)
newbee...


bon, alors tu mets en ligne tout le fourbi necessaire à ton menu
fonctionnel et corrigé en supprimant tous les backgrounds posés à la
volée (mettre dans la feuille de style)

car tu donnes et trop d'infos et pas assez en même temps

exemple : class="Block" qu'on ne sait ce que c'est


cependant, et d'hors et déjà, faire écrire via innerHTML les sous-menus
est une très très très mauvaise idée

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
bruno
m.display = m.display==''? 'block' : '';"


je n'ai pas compris ce code, dsl :

je devine que c'est pour faire prendre la valeur true ou false
resultant de ton test :
m.display==''? 'block' : ''

mais ce test...

Avatar
ASM
bruno wrote:
m.display = m.display==''? 'block' : '';"



je n'ai pas compris ce code, dsl :

je devine que c'est pour faire prendre la valeur true ou false
resultant de ton test :
m.display==''? 'block' : ''

mais ce test...


m = document.getElementById('ceDiv').style;
m = le style de l'objet portant l'id 'ceDiv'

m.display==''?
si le div a son affichage en réglage par défaut (ici 'none')

'block'
hop! on le passe en block (il s'affiche)

:
sinon (s'il est réglé autrement qu'en none pour le display)

'';
hop! on le passe en affichage par défaut (il est désaffiché)


On n'a pas à réfléchir et on balance la même fonction
pour le mouseOver et le mouseOut
-> un coup oui, un coup non, etc ... autant de fois qu'on veut
c'est totomatickch'

--
Stephane Moriaux et son [moins] vieux Mac


Avatar
bruno
merci de ton aide, je l'ai un peu remanié, mias je m'y mettrait plus
tard pour des changfements profonds...