Je vais vous expliquer mon problème...
Je dois être capable d'afficher des menus déroulant avec le contenu de ma base de donnée. Le problème c'Est que chaque menu et sous menu doivent pouvoir être modifié a partir d'une page d'administration bien sur.
Une chose est sûre, je ne vous demande pas de créé le script pour moi. Tout ce que je veux c'est un model de menu déroulant dynamique comme celui la:
/*
Insérer ce script entre les balises <Head> </Head>
*/
<SCRIPT LANGUAGE="JavaScript">
<!--Javascript fourni par-->
<!-- [Script Masters.com]-->
<!-- http://www.script-masters.com/ -->
/****************************************
*Menu dynamique vertical *
*Daniel Fabien21-05-2002 *
*http://www.script-masters.com *
*Prière de conserver ce message *
****************************************/
<!-----------------------Edition des caractèristiques du menu ----------------------------->
var largeur = 120;//Largeur du menu
var gauche = 50;//nombre de pixe de la gauche de l'écran
var top = 100;//Nombre de pixels du haut de la page
var couleur_police_cat="#FFFFFF";//Couleur du texte des categories
var couleur_police_scat="#000000";//Couleur du texte des sous-categories
var couleur_cat="#959EAD";//Couleur de fond des categories
var couleur_scat="#C3C9D4";//Couleur de fond des sous-categories
/********************************************************
*Attention : la modification des 2 variables ci-dessous *
*peut provoquer d'important bug d'affichages *
*Il est fortement conseillé de les conserver en état. *
*********************************************************/
var taille = 11;//Police de caractères
var police = "Arial";//Type de police
<!-----------------------Texte et lien des menus et sous menus---------------------------->
var nb_elem = 4;//Nombre de categorie dans le menu
var nb_souscat = new Array(nb_elem);//Nb_souscat contient le nombre de sous categorie pour chaque categorie
nb_souscat[0] = 3;//Nombre de sous categorie 1
nb_souscat[1] = 3;//Nombre de sous categorie 2
nb_souscat[2] = 2;//Nombre de sous categorie 3
nb_souscat[3] = 3;//Nombre de sous categorie 4
//répeter aussi souvent qu'il y a de categorie...
var categorie = new Array(nb_elem);
var soustab = new Array;
var tab0 = new Array(nb_souscat[0]);
var tab1 = new Array(nb_souscat[1]);
var tab2 = new Array(nb_souscat[2]);
var tab3 = new Array(nb_souscat[3]);
//répeter aussi souvent qu'il y a de categorie...
<!-------Edition PREMIERE categorie et sous categorie------------>
categorie[0] = " Javascript"; //Titre de la categorie
tab0[0] = " Script|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
tab0[1] = " Tutoriaux|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
tab0[2] = " Liens|http://www.script-masters.com|_blank";//Troisième sous-titre|liens|cible
<!-------Edition SECONDE categorie et sous categorie------------>
categorie[1] = " Php";//Titre de la categorie
tab1[0] = " Liens|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
tab1[1] = " Forums|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
tab1[2] = " Livres|http://www.script-masters.com|_blank"; //Troisième sous-titre|liens|cible
<!-------Edition TROISIEME categorie et sous categorie------------>
categorie[2] = " MySql";//Titre de la categorie
tab2[0] = " Bases|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
tab2[1] = " Livres|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
<!-------Edition QUATRIEME categorie et sous categorie------------>
categorie[3] = " Forum"; //Titre de la categorie
tab3[0] = " Javascript|http://www.script-masters.com|_blank";//Premier sous-titre|liens|cible
tab3[1] = " Php/MySQL|http://www.script-masters.com|_blank";//Second sous-titre|liens|cible
tab3[2] = " Webmasters|http://www.script-masters.com|_blank";//Troisième sous-titre|liens|cible
soustab[0] = tab0;
soustab[1] = tab1;
soustab[2] = tab2;
soustab[3] = tab3;
//répeter aussi souvent qu'il y a de categorie...
<!------------------------------------Fonctions-------------------------------------------->
<!------------------------------NE PLUS RIEN MODIFIER-------------------------------------->
var conf = -1;
function Init(){
var hauteur = top;
for(i=1;i<=nb_elem;i++){
document.getElementById("menu"+i+"").style.top = hauteur;
hauteur = hauteur + 17;
}
}
function voir(z){
if(conf==z){
document.getElementById("sousmenu"+z+"").style.visibility = 'hidden';
Init();
conf=conf+nb_elem;
}else{
conf=z;
//Calcul de la hauteur dont doit se baisser le menu
haut=0;
var haut = 15*nb_souscat[z-1]+z*18+top;
//On retracte tous les éléments
for(i=1;i<=nb_elem;i++){
document.getElementById("sousmenu"+i+"").style.visibility = 'hidden';
}
//on les remets tous à leur place
Init();
//on cale le sous menu sous la categorie
document.getElementById("sousmenu"+z+"").style.top = 16;
dec = haut;
//On peut alors baisser tous les autre menus
for(i=z+1;i<=nb_elem;i++){
document.getElementById("menu"+i+"").style.top = dec;
dec=dec+18;
}
//Enfin, on rend le menu visible
document.getElementById("sousmenu"+z+"").style.height = 15*nb_souscat[z-1];
document.getElementById("sousmenu"+z+"").style.visibility = 'visible';
}
}
function affiche(){
//feuille de style
document.write('<style>');
document.write('div.menu{visibility:visible; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_cat+'}');
document.write('div.sousmenu{position:absolute; left:-1; height:20; visibility:hidden; width:'+ largeur +'; border-width: 1px; border-style: solid; border-color: #000000;background-color: '+couleur_scat+'}');
document.write('a.menu{font-family: '+ police +'; color: '+couleur_police_cat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
document.write('a.smenu{font-family: '+ police +'; color: '+couleur_police_scat+'; font-size: '+taille+'px; font-weight:bold; text-decoration: none;}');
document.write('</style>');
document.write('<div>');
for(i=0;i<nb_elem;i++){
boucle = nb_souscat[i];
document.write('<div id="menu'+(i+1)+'" style="position:absolute; left:'+ gauche +'px; width:'+ largeur +'px;" class="menu">');
document.write('<a href="#" class="menu" onClick="javascript:voir('+(i+1)+')">'+categorie[i]+'</a>');
document.write('<div width="'+ largeur +'" id="sousmenu'+(i+1)+'" class="sousmenu">');
for(z=0;z<boucle;z++){
elem=soustab[i][z].split("|");
document.write('<div height="15"><a href="'+elem[1]+'" target="'+elem[2]+'" class="smenu">'+elem[0]+'</a></div>');
}
document.write('</div>');
document.write('</div>');
}
document.write('</div>');
document.onLoad=Init();
}
</script>/*
Insérer ce code entre les balises <Body> </Body>
*/
<script language="Javascript">
affiche();
</script>Bref c'est simple, je voudrais savoir si c'est possible de créer un script comme celui là ou non?
Si oui, j'aimerais de votre aide pour le construire.
Sinon, dites-le moi et j'essaierai une autre alternative, mais j'aimerais vraiment que l'on puisse faire ce script.
J'aurais penser pour ce script que mes menus et sous menus soillent des tables avec comme colonne menu = 1 et si s'est un sous menu, sous_menu = 1... je ne sais pas si vous voyez ou que je veux en venir?!
Merci de m'aider!
A++
).
