begin process at 2012 05 28 07:42:12
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Divers

 > AMÉLIORATION DU MENU DÉROULANT TRÈS SIMPLE POSTÉ IL Y A QUINZE JOURS

AMÉLIORATION DU MENU DÉROULANT TRÈS SIMPLE POSTÉ IL Y A QUINZE JOURS


 Information sur la source

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Divers Classé sous :menu, déroulant, javascript Niveau :Débutant Date de création :02/04/2006 Vu :8 407

Auteur : Patrice H

Ecrire un message privé
Site perso
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

Dans le menu que j'avais présenté il y a quelques temps, si on recliquait sur une rubrique déjà déroulée, rien ne se passait. j'ai modifié légèrement le code pour que cette action ré-enroule le menu.

voici ce code modifié

Il faut l'enregistrer dans un fichier javascript de nom "code.js"

A utiliser comme précédemment :

A utiliser dans un document HTML de ce genre

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript" src="code.js"></script>


</head>

<body onLoad="init()">
<p align="center">
<font face="Arial" size='10' color='#000000'>
<strong>MENU</strong>
</font>
</p >

<div id="menu">
<ul>
<li><a href="#" onClick="debut(0)">1</a></li>
<li><a href="#" onClick="debut(1)">2</a></li>
</ul>
</div>
</body>
</html>


Source

  • // JavaScript Document
  • var menu = new Array();
  • menu[0]="<ul><li><a href='document 1-1.htm'>1.1</a></li><li><a href='document 1-2.htm'>1.2</a></li></ul>";
  • menu[1]="<ul><li><a href='document 2-1.htm'>2.1</a></li><li><a href='document 2-2.htm'>2.2</a></li></ul>";
  • var liste;
  • var flag = new Array();
  • var ancIndex=-1;
  • var ancLigne="";
  • function init()
  • {
  • liste=document.getElementById("menu").getElementsByTagName("Li");
  • for(var i=0 ; i < liste.length ; i++)
  • {
  • flag[i]=0;
  • }
  • }
  • function debut(i)
  • {
  • if (flag[i]==0)
  • {
  • if (ancIndex>=0)
  • {
  • liste[ancIndex].innerHTML=ancLigne;
  • flag[ancIndex]=0;
  • }
  • ancLigne=liste[i].innerHTML
  • ancIndex=i;
  • liste[i].innerHTML+=menu[i];
  • flag[i]=1;
  • }
  • else
  • {
  • liste[i].innerHTML=ancLigne;
  • ancIndex=-1;
  • ancLigne="";
  • flag[i]=0;
  • }
  • }
// JavaScript Document 
   
var menu = new Array(); 
menu[0]="<ul><li><a href='document 1-1.htm'>1.1</a></li><li><a href='document 1-2.htm'>1.2</a></li></ul>"; 
menu[1]="<ul><li><a href='document 2-1.htm'>2.1</a></li><li><a href='document 2-2.htm'>2.2</a></li></ul>"; 
  
var liste; 
  
var flag = new Array(); 
  
var ancIndex=-1; 
var ancLigne=""; 
  
function init() 
{ 
    liste=document.getElementById("menu").getElementsByTagName("Li"); 
    for(var i=0 ; i < liste.length ; i++) 
    { 
            flag[i]=0; 
    } 
} 
  
function debut(i) 
{     
    if (flag[i]==0) 
    { 
                if (ancIndex>=0) 
                { 
                    liste[ancIndex].innerHTML=ancLigne; 
                    flag[ancIndex]=0; 
                } 
                ancLigne=liste[i].innerHTML 
                ancIndex=i; 
                liste[i].innerHTML+=menu[i]; 
                flag[i]=1; 
    } 
    else 
    { 
            liste[i].innerHTML=ancLigne; 
            ancIndex=-1; 
            ancLigne=""; 
            flag[i]=0; 
    }         
             
} 




 Sources du même auteur

UN MENU DÉROULANT TRÈS SIMPLE D'EMPLOI

 Sources de la même categorie

Source avec Zip Source avec une capture SLIDESHOW IMAGES ET TEXTES EN PUR JAVASCRIPT par ansuzpeorth
Source avec Zip INPUT TEXT AUTOMATIQUE CREATION SUPPRESSION par lycanges
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
COLONNES ADAPTABLES EN HAUTEUR par dronoide
Source avec Zip VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

 Sources en rapport avec celle ci

Source avec une capture MENU ANIMÉ AVEC IMAGE SURVOLÉE ! par TheBigBananier
Source avec Zip MENU CONTEXTUEL GRÂCE AU CLICK DROIT DE LA SOURIS AVEC DES M... par OB1_12
Source avec Zip MENU CONTEXTUEL PERSONNALISABLE POUR CLIC DROIT par rubiks10
Source avec Zip MENU CONTEXTUEL PERSONNALISABLE AVEC CHOIX D'IMAGES par rubiks10
Source avec Zip Source avec une capture IUBITO'S MENU V3.1 : QUASIMENT EN CSS, COMPATIBLE IE/NS6+/MO... par iubito

Commentaires et avis

Commentaire de areverse le 20/04/2006 15:16:34

Excellent ! Et excellentissime de par la simplicité.
Je l'ai repris en pointant des éléments DIV dans une TABLE, morceau très appréciable pour notre petit intranet.
Seul ennui : chaque liste déroulante doit tenir sur une seule ligne de javascript (en fait, je constitue cette ligne unique à la fin de la mise au point de ma liste déroulante). Les modifications de telles listes peuvent être lourdes.
Y aurait-il un moyen d'appeler plutôt un petit fichier via une URL ?

Commentaire de gyatso le 31/01/2007 11:41:32

une question avant de me lancer dans ce code (je suis débutante): est ce que ce type de menu permet de choisir non seulement dans la liste proposée, mais d'entrer également une valeur différente qui ne serait pas proposée dans le liste? Je cherche à insérer ce type de menu dans une page html... avez vous une suggestion?
Merci pour votre aide !
Gyatso

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Menu Déroulant avec Javascript [ par Tesnyme ] Bonjour,j'ai un Probleme de menu déroulant crée par jacascript. le probleme se concerne quand on click sur le Menu Déroulant la liste sera affichée ma Menu déroulant [ par lavm01 ] Bonjour,Comment faire plusieurs menus déroulant en javascript qui ont tous la même choses dans le menu en Ex:menu 1 j'ai comme option A B C D E F G  ( problème menu déroulant [ par lebeef ] Bonjour tout le monde,J'ai récemment créé un site internet (c'est pas pour faire de la pub si jamais... www.univie.ch )J'ai donc fait un menu déroulan Problème avec effet lightbox + menu déroulant javascript [ par kevinbp ] Bonjour,j'aurais aimé avoir de l'aide avec mon site internet. Je n'arrive pas à avoir sur la même page un effet de lightbox ajouté à une animation fla Compatibilité menu déroulant avec IE versions 4 5 et 6 !! [ par sanghoria ] Bonjour à tous,Je vous présente mon site actuel : http://www.annuaire-animaux.net/portail-animalier.php que j'ai décidé de relooker niveau design et d Probléme compatibilité menu déroulant [ par cmaelc ] Bonjour, voila le code source d'un menu déroulant, cépendant il n'est pas compatible internet explorer :( Je ne sait pas du tout comment faire, voici menu déroulant [ par eteasdale ] Voici mon problème.Je dois fabriquer 5 menus déroulants ayant des informations différente (ex.:menu1. sorte d'automobile - menu2. couleur - menu3. ann apparaitre calque à partir d'un menu déroulant [ par karenma ] bonjour je souhaite faire apparaitre un calque à partir d'éléments de mon menu déroulant par exemple essai et immo Comment faire ?Merci d'avance pour menu déroulant [ par metaleurop ] Bonjour à tous.J'ai un petit problème avec le menu déroulant suivant:&lt;html&gt; &lt;title&gt;liste déroulante dynamique&lt;/title&gt; &lt;head&gt; & " Menu déroulant avec images liens et agrandissement " [ par WinZapS ] Bonjour à vous ,Le nom de mon sujet n'est pas trop explécite mais ce que je voudrais c'est comme ce qu'il y a sur ce site :http://www.lephoceen.fr , l


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,030 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales