Menu

Qui peut m'expliquer ce code en javascript ? [Résolu/Fermé]

Messages postés
17
Date d'inscription
lundi 30 septembre 2013
Statut
Membre
Dernière intervention
25 février 2015
- - Dernière réponse : RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
- 2 oct. 2013 à 09:15
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>
Afficher la suite 

3 réponses

0
Merci
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 :)
rofinho
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
0
Merci
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|[׺°"~'"°º×
0
Merci
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
rofinho
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
RAD ZONE
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1285 -
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+