Qui peut m'expliquer ce code en javascript ?

[Résolu/Fermé]
Signaler
Messages postés
17
Date d'inscription
lundi 30 septembre 2013
Statut
Membre
Dernière intervention
25 février 2015
-
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
-
Bonjour,
je développe une application web, j'avais besoin de réaliser un système de menu et sous menu vec une arborescence , après quelques recherches sur internet, je suis tombe sur ce code qui contient du html, css, et javascript ce que je cherchais exactement, mais que je n'arrive pas a comprendre (la combinaison)
j'aimerais aussi savoir que faire pour ajouter un sous-sous-menu
donc

- Menu
-----|
--- Sous menu
-------|
-----Sous sous menu
merci d'avance

voici le code


<style>
span.menu { display: block; }
span.ferme {display: none;}
.menu{text-decoration:none;decoration:none; color:red;}
</style>
<script>
function twAjusteMenu(id) {

element = document.getElementById(id);
element.className = (element.className.toLowerCase() == 'menu'?'ferme':'menu');
}

onload = function() {
twAjusteMenu('sousmenu1');
twAjusteMenu('sousmenu2');
twAjusteMenu('sousmenu3');
twAjusteMenu('sousmenu4');
}
</script>
</head>

<body bgcolor="#FFFFFF">

<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu1'); return false; ">menu 1er</a></span>
<span class="menu" id="sousmenu1">
<a href="1-1">1-1</a><br >
<a href="1-2">1-2</a><br >
<a href="1-3">1-3</a><br >
<a href="1-4">1-4</a><br >
<a href="1-5">1-5</a><br >
</span>
<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu2'); return false; twAjusteMenu('sousmenu1'); return false;">menu 2em</a></span>
<span class="menu" id="sousmenu2">
<a href="2-1">2-1</a><br >
<a href="2-2">2-2</a><br >
<a href="2-3">2-3</a><br >
<a href="2-4">2-4</a><br >
<a href="2-5">2-5</a><br >
</span>
<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu3'); return false; twAjusteMenu('sousmenu1'); return false;">menu 3em</a></span>
<span class="menu" id="sousmenu3">
<a href="2-1">2-1</a><br >
<a href="2-2">2-2</a><br >
<a href="2-3">2-3</a><br >
<a href="2-4">2-4</a><br >
<a href="2-5">2-5</a><br >
</span>

3 réponses


salut, tu souhaite trois niveau de menu ?

si tu souhaite un menu déroulant classique sans javascript va voir là :

http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

l'avantage est que si l'utilisateur à désactivé javascript sa fonctionne :)
Messages postés
17
Date d'inscription
lundi 30 septembre 2013
Statut
Membre
Dernière intervention
25 février 2015

merci, j'aime bien mais j'aimerais être en mesure de faire des tree ou arborescence moi même
salut, c'est peut être a cause de la ternaire ?

en plus simple mais plus long :

<style type="text/css">
span.menu {
display: block;
}
span.ferme {
display: none;
}
.menu {
text-decoration: none;
decoration: none;
color: red;
}
</style>
<script type="text/javascript">
function twAjusteMenu(id) {

element = document.getElementById(id);
if(element.className == 'ferme'){
element.className = 'menu';
}
else{
element.className ='ferme';
}
}

onload = function() {
twAjusteMenu('sousmenu1');
twAjusteMenu('sousmenu2');
twAjusteMenu('sousmenu3');
twAjusteMenu('sousmenu4');
}
</script>
</head>
<body>
<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu1'); return false; ">menu 1er</a></span>
<span class="menu" id="sousmenu1"> <a href="1-1">1-1</a>
<br >
<a href="1-2">1-2</a>
<br >
<a href="1-3">1-3</a>
<br >
<a href="1-4">1-4</a>
<br >
<a href="1-5">1-5</a>
<br >
</span>
<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu2'); return false; twAjusteMenu('sousmenu1'); return false;">menu 2em</a></span>
<span class="menu" id="sousmenu2"> <a href="2-1">2-1</a>
<br >
<a href="2-2">2-2</a>
<br >
<a href="2-3">2-3</a>
<br >
<a href="2-4">2-4</a>
<br >
<a href="2-5">2-5</a>
<br >
</span>
<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu3'); return false; twAjusteMenu('sousmenu1'); return false;">menu 3em</a></span>
<span class="menu" id="sousmenu3"> <a href="2-1">2-1</a>
<br >
<a href="2-2">2-2</a>
<br >
<a href="2-3">2-3</a>
<br >
<a href="2-4">2-4</a>
<br >
<a href="2-5">2-5</a>
<br >
</span>

׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×

salut, j'ai plus de temps je t'explique ma version....j'essaye


<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu1'); return false; ">menu 1er</a></span>
<span class="menu" id="sousmenu1"> <a href="1-1">1-1</a>
<br >
<a href="1-2">1-2</a>
<br >
<a href="1-3">1-3</a>
<br >
<a href="1-4">1-4</a>
<br >
<a href="1-5">1-5</a>
<br >
</span>
<span class="menu"><a href="/" <ital>onclick="twAjusteMenu('sousmenu2')</ital>; return false; twAjusteMenu('sousmenu1'); return false;">menu 2em</a></span>
<span class="menu" id="sousmenu2"> <a href="2-1">2-1</a>
<br >
<a href="2-2">2-2</a>
<br >
<a href="2-3">2-3</a>
<br >
<a href="2-4">2-4</a>
<br >
<a href="2-5">2-5</a>
<br >
</span>
<span class="menu"><a href="/" onclick="twAjusteMenu('sousmenu3'); return false; twAjusteMenu('sousmenu1'); return false;">menu 3em</a></span>
<span class="menu" id="sousmenu3"> <a href="2-1">2-1</a>
<br >
<a href="2-2">2-2</a>
<br >
<a href="2-3">2-3</a>
<br >
<a href="2-4">2-4</a>
<br >
<a href="2-5">2-5</a>
<br >
</span>

en souligné les class

en gras les id

en italique l'événement click

on as la ligne :

element = document.getElementById(id);
en gros sa veut dire on stock en mémoire les id dans la variable mémoire
ensuite :

onclick="twAjusteMenu('sousmenu1');
onclick="twAjusteMenu('sousmenu2');
onclick="twAjusteMenu('sousmenu3');

sa veut dire si on clique dessus on appel la fonction tw'AjusteMenu (function twAjusteMenu(id) ) et on envois l'id correspondant à la variable element

if(element.className == 'ferme'){

si cette element possede la class 'ferme' alors sa class deviens 'menu'
element.className = 'menu';
}

sinon elle devient 'ferme'
else{
element.className ='ferme';
}


et si on regarde en css les class

span.menu {
display: block;
}
span.ferme {
display: none;
}

none sa fait disparaître et block sa fait apparaître
Messages postés
17
Date d'inscription
lundi 30 septembre 2013
Statut
Membre
Dernière intervention
25 février 2015

Merci lobotoFix, c'est juste ce que je cherchais.
maintenant je peux ajouter les sous sous-menu,
mais les blem ce que avec IE, Js (java-script) es désactivé au démarrage de la page.
Utilisateur anonyme
en local il faut accepter, mais une fois en ligne non, pas de soucis
Merci vraiment
Messages postés
5205
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 337
Salut

tu peux retirer le blocage IE en loxal,
pour travailler tu met une Mark of the Web (MOTW) juste sous le titre

<title>...</title>
<!-- saved from url=(0014)about:internet -->

a+