IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

menu horiznotal avec sous menu [Fait]


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Candidat au Club
    Inscrit en
    Avril 2008
    Messages
    2
    Détails du profil
    Informations forums :
    Inscription : Avril 2008
    Messages : 2
    Par défaut menu horiznotal avec sous menu
    Bonjour, je developpe actuellement une interface web en javascript et dans cet interface j'ai inclus un menu avec sous-menu sauf que je dois ajouté à ce sous-menu un autre sous de façon à avoir un menu à 3 ou 4 niveaux voici le scritp:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    //************ Menu Principal ************//
    Text     = '#FFFFFF'
    bgcolor  = '#000066'// Couleur Arrière
    bgcolor2 = '#6699CC'// Couleur Arrière Surbrillance
    bgcolor3 = '#0000ff'// Couleur Bordure 
    LargeurM = 150 		// Largeur
    HauteurM = 30		// Hauteur 
    TailleM  = 2		// Taille Font
    menu = new Array;
    i = 0;
    menu[i++] = 'Applications Prod.'
    menu[i++] = ''
    menu[i++] = 'Applications tests'
    menu[i++] = 'http://com-sa09mda/applications/progicom.htm'
    menu[i++] = 'Permanences'
    menu[i++] = 'http://com-sa09mda/Permanences_Astreintes/Permanences.htm'
    menu[i++] = 'Directions'
    menu[i++] = ''
    menu[i++] = 'Gestion Electronique des Documents'
    menu[i++] = ''
    menu[i++] = 'Eramet'
    menu[i++] = ''
    menu[i++] = 'Autres applications'
    menu[i++] = ''
    menu[i++] = 'Autres sites'
    menu[i++] = ''
    menu[i++] = 'Annuaire'
    menu[i++] = ''
     
    //************ Sous-Menus ************//
    bgcolor5 ='#555555'	// Couleur Arrière
    bgcolor6 ='#6699ff'	// Couleur Arrière Surbrillance
    bgcolor4 ='#0000ff'	// Couleur Bordure 
    LargeurS = 150		// Largeur
    HauteurS = 20		// Hauteur
    TailleS  = 1		// Taille Font
    zlien = new Array
    zlien[0] = new Array
    zlien[1] = new Array
    zlien[2] = new Array
    zlien[3] = new Array
    zlien[4] = new Array
    zlien[5] = new Array
    zlien[6] = new Array
    zlien[7] = new Array
    zlien[8] = new Array
     
    i = 0;
    zlien[0][i++] = 'Oracle application'
    zlien[0][i++] = 'http://com-sa10mda:8080/OA_HTML/US/prod_1.1.7.27.htm'
    zlien[0][i++] = 'Delta paie'
    zlien[0][i++] = 'http://com-sa16mda/delta_jinit_prod.html'
    zlien[0][i++] = 'Reporting (Crystal)'
    zlien[0][i++] = 'http://com-sa24mda/crystal/enterprise9/ePorfolio/fr/logonform.csp'
    zlien[0][i++] = 'RITA'
    zlien[0][i++] = 'http://com-sa09mda/index_comilog_droit_23012004.htm'
     
    i = 0;
    zlien[3][i++] = 'DG'
    zlien[3][i++] = 'http://com-sa15mda:8000/oa11i/default.aspx'
    zlien[3][i++] = 'DAI'
    zlien[3][i++] = 'http://com-sa15mda:8000/dai/default.aspx'
    zlien[3][i++] = 'DRH'
    zlien[3][i++] = ''
    zlien[3][i++] = 'DFIP'
    zlien[3][i++] = ''
    zlien[3][i++] = 'DM'
    zlien[3][i++] = ''
    zlien[3][i++] = 'DAF'
    zlien[3][i++] = ''
    zlien[3][i++] = 'DAP'
    zlien[3][i++] = ''
    zlien[3][i++] = 'DCRP'
    zlien[3][i++] = ''
    zlien[3][i++] = 'DCIM'
    zlien[3][i++] = ''
     
    i = 0;
    zlien[4][i++] = 'Oracle Application 11i'
    zlien[4][i++] = 'http://com-sa15mda:8000/oa11i/default.aspx'
    zlien[4][i++] = 'DAI'
    zlien[4][i++] = 'http://com-sa15mda:8000/dai/default.aspx'
    zlien[4][i++] = 'DFIP'
    zlien[4][i++] = 'http://com-sa15mda:8000/dfip/default.aspx'
    zlien[4][i++] = 'DM'
    zlien[4][i++] = 'http://com-sa15mda:8000/dm/default.aspx'
    zlien[4][i++] = 'DCIM'
    zlien[4][i++] = 'http://com-sa15mda:8000/dcim/default.aspx'
    zlien[4][i++] = 'DAF'
    zlien[4][i++] = 'http://com-sa15mda:8000/daf/default.aspx'
    zlien[4][i++] = 'DAP'
    zlien[4][i++] = 'http://com-sa15mda:8000/dap/default.aspx'
    zlien[4][i++] = 'DCRP'
    zlien[4][i++] = 'http://com-sa15mda:8000/dcrp/default.aspx'
    zlien[4][i++] = 'DG'
    zlien[4][i++] = 'http://com-sa15mda:8000/dg/default.aspx'
    zlien[4][i++] = 'DRH'
    zlien[4][i++] = 'http://com-sa15mda:8000/drh/default.aspx'
    zlien[4][i++] = 'Imprimés'
     
    i = 0;
    zlien[5][i++] = 'Groupe'
    zlien[5][i++] = 'http://eramet.emea.ecm.era/'
    zlien[5][i++] = 'Magnitude'
    zlien[5][i++] = 'http://magnitude.emea.ecm.era/production/default.jsp'
    zlien[5][i++] = 'Eralink'
    zlien[5][i++] = 'http://eralink.emea.ecm.era:ERALINK'
    zlien[5][i++] = 'Erajob'
    zlien[5][i++] = ''
    zlien[5][i++] = 'Erabuy'
    zlien[5][i++] = 'http://erabuy.eramet/'
     
    i = 0;
    zlien[6][i++] = 'Portail Citrix'
    zlien[6][i++] = 'http://10.9.1.30/'
    zlien[6][i++] = 'Prisma (Environnement)'
    zlien[6][i++] = 'http://10.64.1.82/cgi.Prisma/doc/main.cgi?tstamp=1079014211&database=prismadoctest'
    zlien[6][i++] = 'Admin. Crystal Report'
    zlien[6][i++] = 'http://com-sa24mda/crystal/enterprise9/admin/fr/admin.cwr'
    zlien[6][i++] = 'Admin. Oracle E.M'
    zlien[6][i++] = 'http://com-sa27mda_comilog.com:7777/em/'
    i = 0;
    zlien[7][i++] = 'Sodepal'
    zlien[7][i++] = 'http://com-sa09mda/SODEPAL'
    zlien[7][i++] = 'Setrag'
    zlien[7][i++] = ''
     
    /************ Fin des paramètres, Début du programme ************/
     
    document.write('<style type="text/css">')
    document.write('.popper { POSITION: absolute; VISIBILITY: hidden; z-index:15; left:'+(LargeurM-1)+' }')
    document.write('.ejsmenu {color:#FFFFFF; text-decoration:none;cursor:default;}') //cursor:default ou hand
    document.write('</style>')
    document.write('<div style="position:relative"><DIV class=popper id=topdeck></DIV>')
     
    if(document.getElementById) { skn = document.getElementById("topdeck").style }
     
    function pop(msg,pos)
    {	skn.visibility = "hidden"
    	skn.top = pos
    	if(msg.length == 0) return
    	var content ="<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR="+bgcolor4+" WIDTH="+LargeurS+"><TR><TD><TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=1>";
    	pass = 0
    	while(pass < msg.length)
    	{	content += "<TR><TD BGCOLOR="+bgcolor5+" onMouseDown='location.href=\""+msg[pass+1]+"\"'CLASS=ejsmenu onMouseOver=\"this.style.background='"+bgcolor6+"'\" onMouseOut=\"this.style.background='"+bgcolor5+"'\" HEIGHT="+HauteurS+"><FONT SIZE="+TailleS+" FACE=Verdana><B> &nbsp;"+msg[pass]+"</B></FONT></TD></TR>";
    		pass+=2
    	}
    	document.getElementById("topdeck").innerHTML = content + "</TABLE></TD></TR></TABLE>"
    	skn.visibility = "visible"
    }
     
    document.onclick = function() { if(document.getElementById) skn.visibility = "hidden" }
     
    if(document.getElementById)
    {	document.write('<DIV ID=topgauche><TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 BGCOLOR='+bgcolor3+' WIDTH='+LargeurM+' HEIGHT=80><TR><TD><TABLE CELLPADING=0 CELLSPACING=1 BORDER=0 WIDTH=100% HEIGHT='+HauteurM*menu.length/2+'>')
    	pass = 0
    	while(pass < menu.length/2)
    	{	document.write('<tr><TD WIDTH='+LargeurM+' ALIGN=center BGCOLOR='+bgcolor+' onMouseDown="location.href=\''+menu[pass*2+1]+'\'" onMouseOver="this.style.background=\''+bgcolor2+'\';pop(zlien['+pass+'],'+pass*HauteurM+')" onMouseOut="this.style.background=\''+bgcolor+'\'" CLASS=ejsmenu><FONT SIZE='+TailleM+' FACE=Verdana><B>'+menu[pass*2]+'</B></FONT></TD></tr>')
    		pass++
    	}	
    	document.write('</TABLE></TD></TR></TABLE></DIV>')
    }
    document.write('</div>')
          </script></td>
    **********************************************
    Que dois-je faire ?

    Merci d'avance

  2. #2
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    changer de menu

    désolé je n'ai pas pu résister ^^

    bon plus sérieusement , je pense que tu devrais essayer de contruire ton menu en css plutôt qu'en javascript , pour plusieurs raison :
    - la maintenance du script
    - la lisibilité du code source
    - compatibilité ( mais la ... j'ai comme un doute quand même )

    si ce menu te plait :
    http://css.developpez.com/tutoriels/...enu01test.html

    lis ce tutoriel qui explique comment le réaliser :

    http://css.developpez.com/tutoriels/menu-deroulant/

    et normalement a la fin de celui ci tu devrais comprendre le fonctionnement et te créer des classes css te permettant de créer X menu / sous-menu

    ce n'est qu'un conseil !!

    si tu tiens vraiment a utiliser ton menu actuel il y a du boulot ... mais bon il te faut créer une nouvelle section que tu ajouteras dans ta boucle ... plus de détail ?

  3. #3
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    il n'y aurait pas un petit soucis avec ton menu ??
    les sous menu apparaissent en haut du menu et non en face ( comme dans 99% des cas ) ...

    c'est imbuvable a la navigation ...
    de plus tu me dis que l'on t'impose ce menu , je ne vois pas en quoi on te refuserais le droit d'utiliser un autre menu , plus compatible , plus simple d'utilisation et a faire évoluer ....

Discussions similaires

  1. Menu contextutel avec sous menu
    Par koKoTis dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 20/07/2012, 15h46
  2. Menu horizontal avec sous menu transition
    Par Tarkna dans le forum Mise en page CSS
    Réponses: 15
    Dernier message: 25/10/2011, 21h50
  3. Menu vertical avec sous menu horizontal
    Par sami_c dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 24/06/2010, 17h53
  4. menu système avec sous-menu
    Par misterychris dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 23/02/2010, 08h49
  5. Menu Horizontal avec sous menu horizontal
    Par yamatoshi dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 28/04/2009, 15h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo