Qui peut m'expliquer ce code en javascript ?

Résolu

rofinho Messages postés 17 Date d'inscription Statut Membre Dernière intervention -
RAD ZONE Messages postés 5362 Statut Contributeur - 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>

Afficher la suite

A voir également:

Qui peut m'expliquer ce code en javascript ?
Code ascii - Guide
Code puk bloqué - Guide
Comment déverrouiller un téléphone quand on a oublié le code - Guide
Code activation windows 10 - Guide
Code blocks - Télécharger - Langages

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

rofinho Messages postés 17 Date d'inscription Statut Membre Dernière intervention

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

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


<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 Statut Membre Dernière intervention

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

Rofinho

Merci vraiment

RAD ZONE Messages postés 5362 Statut Contributeur 1 360

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

Votre réponse

Discussions similaires