Qui peut m'expliquer ce code en javascript ?

Résolu/Fermé

rofinho Messages postés 17 Date d'inscription lundi 30 septembre 2013 Statut Membre Dernière intervention 25 février 2015 - 30 sept. 2013 à 15:49
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 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">

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

A voir également:

Qui peut m'expliquer ce code en javascript ?
Code ascii - Guide
Code puk bloqué - Guide
Code activation windows 10 - Guide
Code deverouillage telephone perdu - Guide
Code blocks - Télécharger - Langages

3 réponses

Réponse 1 / 3

Utilisateur anonyme
30 sept. 2013 à 16:18

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
30 sept. 2013 à 16:27

merci, j'aime bien mais j'aimerais être en mesure de faire des tree ou arborescence moi même

Réponse 2 / 3

Utilisateur anonyme
Modifié par lobotoFix le 30/09/2013 à 18:30

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
1 oct. 2013 à 05:16

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
1 oct. 2013 à 17:02

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
1 oct. 2013 à 17:42

en local il faut accepter, mais une fois en ligne non, pas de soucis

Rofinho
2 oct. 2013 à 08:52

Merci vraiment

RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
2 oct. 2013 à 09:15

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

Discussions similaires

sertissage des cables rj45

Code de renvoi d'appel : Ooredo, Mobilis...