Qui peut m'expliquer ce code en javascript ?

Résolu

rofinho -

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

<a href="/" onclick="twAjusteMenu('sousmenu1'); return false; ">menu 1er</a>

<a href="1-1">1-1</a> 
<a href="1-2">1-2</a> 
<a href="1-3">1-3</a> 
<a href="1-4">1-4</a> 
<a href="1-5">1-5</a> 

<a href="/" onclick="twAjusteMenu('sousmenu2'); return false; twAjusteMenu('sousmenu1'); return false;">menu 2em</a>

<a href="2-1">2-1</a> 
<a href="2-2">2-2</a> 
<a href="2-3">2-3</a> 
<a href="2-4">2-4</a> 
<a href="2-5">2-5</a> 

<a href="/" onclick="twAjusteMenu('sousmenu3'); return false; twAjusteMenu('sousmenu1'); return false;">menu 3em</a>

<a href="2-1">2-1</a> 
<a href="2-2">2-2</a> 
<a href="2-3">2-3</a> 
<a href="2-4">2-4</a> 
<a href="2-5">2-5</a>

Afficher la suite

A voir également

Qui peut m'expliquer ce code en javascript ?
Le code ascii en informatique - Guide
Code windows 10 - Guide
Code puk bloqué - Guide
Code telephone - Guide
Scanner un qr code sur pc - Guide

3 réponses

Réponse 1 / 3
Utilisateur anonyme
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 :)

0

Réagir
1. rofinho Auteur
  
  merci, j'aime bien mais j'aimerais être en mesure de faire des tree ou arborescence moi même
  
  0
  
  Réagir

Utilisateur anonyme

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|[×º°"~'"°º×

Réponse 3 / 3
Utilisateur anonyme
salut, j'ai plus de temps je t'explique ma version....j'essaye
```
<a href="/" onclick="twAjusteMenu('sousmenu1'); return false; ">menu 1er</a>
 <a href="1-1">1-1</a>
 
<a href="1-2">1-2</a>
 
<a href="1-3">1-3</a>
 
<a href="1-4">1-4</a>
 
<a href="1-5">1-5</a>
 

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

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

```
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
0

Réagir
1. rofinho Auteur
 
 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.
 
 0
 
 Réagir
2. Utilisateur anonyme
 
 en local il faut accepter, mais une fois en ligne non, pas de soucis
 
 0
 
 Réagir
3. Rofinho
 
 Merci vraiment
 
 0
 
 Réagir
4. RAD ZONE Contributeur
 
 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>
 
 
 a+
 
 0
 
 Réagir

Qui peut m'expliquer ce code en javascript ?

3 réponses

Discussions similaires

Newsletters