Menu dynamique besoin d'aide ! - HTML/CSS - Programmation
Marsh Posté le 28-10-2005 à 20:53:33
iztep a écrit : Bonjour,
|
Si ce que tu appelles menu dynamique est un menu généré par JavaScript alors oublie cela car c'est du n'importe quoi...
Je ne vois pas pourquoi tu as besoin d'un menu qui se génère lui-même. De plus le JS n'est pas fait pour cela, ces taches doivent s'éffectuer côté serveur...
Quel est l'interêt d'avoir un tel menu ? Peut-tu m'expliquer ?
Marsh Posté le 28-10-2005 à 21:10:57
Ok !
je veux juste un menu comportant 5 catégorie, avec pour chaque, des sous menus pour chacune des 5 catégories. les exemples que j'ai mis en lien illustrent bien ce que je veux avoir en résultat... désolée si je n'emploie pas les bons termes !
apres, voilà mon probleme je pense l'avoir bien expliqué, et je voudrais bien que quelqu'un m'aide à comprendre ce qui ne va pas.
Marsh Posté le 28-10-2005 à 21:19:16
iztep a écrit : Ok ! |
Les menus c'est du CSS avec un peu de JS optionnel et c'est http://css.alsacreations.com/Galeries-de-menus-en-CSS
Marsh Posté le 28-10-2005 à 21:23:40
Merci je vais tester ça tres rapidement
Marsh Posté le 28-10-2005 à 21:26:16
iztep a écrit : Merci je vais tester ça tres rapidement |
Malheuresement les menus avec des sous-menus ne fonctionnent pas sans JS et je suis en train d'essayer de réparer cela...
Marsh Posté le 28-10-2005 à 21:56:44
ouais en fait je suis en train de tester celui ci :
http://css.alsacreations.com/modelesmenus/hd1.htm
mais une fois que je fais aparaitre un sous menu il ne disparait pas apres avoir déplacé la souris, du coup je me retrouve avec les 5 sous menus d'affichés.....
Marsh Posté le 28-10-2005 à 21:58:34
ReplyMarsh Posté le 28-10-2005 à 22:45:02
iztep a écrit : il faudrait pas une fonction onmouseout aussi non ? |
Si tu es patient attends demain car je suis en train de créer un menu qui te conviendras parfaitement...
Marsh Posté le 28-10-2005 à 23:18:07
CNeo a écrit : Si tu es patient attends demain car je suis en train de créer un menu qui te conviendras parfaitement... |
alors là tu assures ! merci beaucoup c'est classe.
Marsh Posté le 30-10-2005 à 20:19:16
ReplyMarsh Posté le 30-10-2005 à 23:29:13
ReplyMarsh Posté le 30-10-2005 à 23:44:22
Tu devrais mettre tes menus sur plusieurs pages, là ça ouvre plusieurs menus en même temps.
Marsh Posté le 30-10-2005 à 23:47:26
The-Shadow a écrit : Tu devrais mettre tes menus sur plusieurs pages, là ça ouvre plusieurs menus en même temps. |
Je sais mais je verrais cela demain ! Merci du conseil !
Marsh Posté le 28-10-2005 à 20:42:03
Bonjour,
c'est mon 1er post ici, je demande un peu d'aide pour un menu dynamique simple !
j'ai mis en oeuvre un script mais que je n'arrive pas à debuger, alors j'ai recherché des scripts sur internet...
là je finis par me demander si c'est moi qui bug, je n'arrive à en faire fonctionner aucun...
j'en ai trouvé plusieurs dont ceux là, qui sont censés fonctionner sous IE et firefox:
#1 : http://www.editeurjavascript.com/s [...] _1_111.php
#2 : http://www.script-masters.com/home [...] &script=62
C'est tout bete, mais je ne comprend pas, rien ne s'affiche...
Pareil pour celui ci :
<!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">
/* Daniel Fabien - webmaster@script-masters.com
* Script Masters - http://www.script-masters.com/
*
* Menu deroulant dynamique
* Vous pouvez utilisé ce script sous reserve de conserver ce message
*/
// Configurez ces variables pour personnaliser votre menu
var nbMenu = 4; // Nombre de Menu (ici 4 : javascript, php, MySql et Html
var tailleMenu = 400; // Largeur en pixel du menu
var hauteur = 200; // Hauteur approximative des menus une fois déroulé
var tailleCellule = tailleMenu / nbMenu; // Ne rien modifier
var background = "#FFFFFF"; // Couleur de fond de votre page
var couleurFond = "#C3C9D4"; // Couleur de fond du menu
var couleurRollover = "#959EAD"; // Couleur de la case du menu lors du rollover
var couleurBordure = "#000000"; // Couleur des bordures du menu
var couleurTexte = "#000000"; // Couleur de votre texte
var couleurTexteRoller = "#FFFFFF"; // Couleur des liens lors du passage de la souris
var police = "Verdana, Arial;"; // Police du menu
var taillePolice = "9"; // la taille de votre texte
var image = "fleche.gif"; // Adresse ou se trouve l'image pour rentrer le menu
// Vos titres principaux
var valMenu = new Array(nbMenu);
valMenu[0] = "Javascript";
valMenu[1] = "Php";
valMenu[2] = "MySQL";
valMenu[3] = "Html";
// Si vous rajouter des menus, rajouter aussi une ligne par menu
// en prenant soins d'increenter l'indice
// exemple :
// valSsMenu[4] = new Array();
// Le faire pour valSsMenu, valSsMenuLien, valSsMenuCible
var valSsMenu = new Array(nbMenu);
valSsMenu[0] = new Array();
valSsMenu[1] = new Array();
valSsMenu[2] = new Array();
valSsMenu[3] = new Array();
var valSsMenuLien = new Array(nbMenu);
valSsMenuLien[0] = new Array();
valSsMenuLien[1] = new Array();
valSsMenuLien[2] = new Array();
valSsMenuLien[3] = new Array();
var valSsMenuCible = new Array(nbMenu);
valSsMenuCible[0] = new Array();
valSsMenuCible[1] = new Array();
valSsMenuCible[2] = new Array();
valSsMenuCible[3] = new Array();
// Les sous-titres en rapport avec les numero de titres principaux
// Suivi du lien
// Et de la cible ( _blank = nouvelle fenêtre _top = même fenetre )
// Mettre le nom de la frame à la place de la cible si il y en a une
// Javascript
valSsMenu[0][0] = "Annuaire";
valSsMenuLien[0][0] = "http://www.script-masters.com/";
valSsMenuCible[0][0] = "_blank";
valSsMenu[0][1] = "Cours";
valSsMenuLien[0][1] = "http://www.script-masters.com/";
valSsMenuCible[0][1] = "_blank";
valSsMenu[0][2] = "Exemples";
valSsMenuLien[0][2] = "http://www.script-masters.com/";
valSsMenuCible[0][2] = "_blank";
// Php
valSsMenu[1][0] = "Guide Officiel";
valSsMenuLien[1][0] = "Http://www.script-masters.com/";
valSsMenuCible[1][0] = "_blank";
valSsMenu[1][1] = "Sites Php";
valSsMenuLien[1][1] = "Http://www.script-masters.com/";
valSsMenuCible[1][1] = "_blank";
valSsMenu[1][2] = "Trucs et astuces";
valSsMenuLien[1][2] = "Http://www.script-masters.com/";
valSsMenuCible[1][2] = "_blank";
// MySQL
valSsMenu[2][0] = "Qu'est-ce que MySQL?";
valSsMenuLien[2][0] = "Http://www.script-masters.com/";
valSsMenuCible[2][0] = "_blank";
valSsMenu[2][1] = "Installation";
valSsMenuLien[2][1] = "Http://www.script-masters.com/";
valSsMenuCible[2][1] = "_blank";
valSsMenu[2][2] = "Manipulation";
valSsMenuLien[2][2] = "Http://www.script-masters.com/";
valSsMenuCible[2][2] = "_blank";
valSsMenu[2][3] = "Livres";
valSsMenuLien[2][3] = "Http://www.script-masters.com/";
valSsMenuCible[2][3] = "_blank";
// Html
valSsMenu[3][0] = "Balises de bases";
valSsMenuLien[3][0] = "Http://www.script-masters.com/";
valSsMenuCible[3][0] = "_blank";
valSsMenu[3][1] = "Editeurs Html";
valSsMenuLien[3][1] = "Http://www.script-masters.com/";
valSsMenuCible[3][1] = "_blank";
valSsMenu[3][2] = "Exemples";
valSsMenuLien[3][2] = "Http://www.script-masters.com/";
valSsMenuCible[3][2] = "_blank";
// Ne rien modifier sous cette ligne //
document.write('<style type="text/css">');
document.write('table.menu {');
document.write(' border: 1px solid '+ background +'');
document.write('}');
document.write('td.inc {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' background-color: '+ couleurFond +';');
document.write(' border-top-width: 1px;');
document.write(' border-right-width: 1px;');
document.write(' border-bottom-width: 1px;');
document.write(' border-left-width: 0px;');
document.write(' border-top-style: solid;');
document.write(' border-right-style: solid;');
document.write(' border-bottom-style: solid;');
document.write(' border-left-style: solid;');
document.write(' border-top-color: '+ couleurBordure +';');
document.write(' border-right-color: '+ couleurBordure +';');
document.write(' border-bottom-color: '+ couleurBordure +';');
document.write(' border-left-color: '+ couleurBordure +';');
document.write(' cursor: hand;');
document.write('}');
document.write('td.menu {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' background-color: '+ couleurFond +';');
document.write(' border: 1px solid '+ couleurBordure +';');
document.write(' cursor: hand;');
document.write('}');
document.write('td.ssmenuD {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' background-color: '+ couleurFond +';');
document.write(' border: 1px solid '+ couleurBordure +';');
document.write('}');
document.write('a.ssmenu {');
document.write(' font-family: '+ police +';');
document.write(' font-size: '+ taillePolice +'px;');
document.write(' text-decoration: none;');
document.write(' color: '+ couleurTexte +';');
document.write('}');
document.write('td.invisible {');
document.write(' background-color: '+ background +';');
document.write(' border: 1px solid '+ background +';');
document.write('}');
document.write('</style>');
// Detection des navigateurs
var is_ie5 = 0;
var is_ns6 = 0;
var is_ns4 = 0;
var is_ie4 = 0;
if ((document.getElementById) && (document.all)){
is_ie5 = 1;
} else if(document.getElementById){
is_ns6 = 1;
}
if (document.layers) {
is_ns4 = 1;
}
if ((document.all)&&(!document.getElementById)) {
is_ie4 = 1;
}
function generationMenu(){
// Affichage du menu
document.write('<table width="'+ tailleMenu +'" border="0" cellspacing="0" cellpadding="0">');
document.write('<tr align="center" class="menu">');
for (i=0;i<nbMenu;i++) {
var classe = "inc";
if ( i==0 ){
classe="menu";
}
document.write('<td onMouseOut="javascript:this.style.background=\''+ couleurFond +'\'" onMouseOver="javascript:this.style.background=\''+ couleurRollover +'\'" class="'+ classe +'" width="'+ tailleCellule +'"onClick="changeMenu('+ i + ')">'+ valMenu[i] +'</td>');
}
document.write('</tr>');
// Préparation des sous-menus
document.write('<tr border="0" class="menu"><td colspan='+ nbMenu +' class="ssmenu" border="0">');
if (is_ie5 || is_ie4 || is_ns6){
document.write('<DIV id="ssMenu" style="position:relative;top:0px;left:0px;width='+ tailleMenu +';height='+ hauteur +';visibility:hidden">');
document.write('</DIV>');
}
document.write('</td></tr>');
document.write('</table>');
}
function changeMenu(numMenu){
// Génération du nouveau tableau
var newTable="";
newTable += "<table border='0' cellspacing='0' cellpadding='0' width='"+ tailleMenu +"' class=menu><tr>";
for (i=0;i<valSsMenu.length;i++) {
if ( i==numMenu ) {
newTable += "<td class='ssmenuD' width='"+ tailleCellule +"'>";
for (z=0;z<valSsMenu[i].length;z++) {
// On affiche les liens
newTable += "<a href='"+ valSsMenuLien[i][z] +"' target='"+ valSsMenuCible[i][z] +"' onMouseOut='javascript:this.style.color=\""+ couleuA?r?u?Z??????rTexte +"\"' onMouseOver='javascript:this.style.color=\""+ couleurTexteRoller +"\"' class='ssmenu'>"+ valSsMenu[i][z] + "</a><br>";
}
newTable += "<a href='javascript:suppMenu()'><center><img src='"+ image +"' border=0></center></a></td>";
}else{
newTable += "<td class='invisible' width='"+ tailleCellule +"'> </td>";
}
}
newTable += "</tr></table>";
if (is_ie5 || is_ns6){
document.getElementById("ssMenu" ).innerHTML = newTable;
document.getElementById("ssMenu" ).style.visibility = "visible";
} else if (is_ie4) {
document.all["ssMenu"].innerHTML = newTable;
document.all["ssMenu"].style.visibility = "visible";
}
}
function suppMenu() {
document.getElementById("ssMenu" ).style.visibility = "hidden";
}
</script>
</head>
<body>
<script>
generationMenu();
</script>
</body>
</html>
Quelqu'un pourrait m'aider ? !!
Merci d'avance...
Message édité par iztep le 28-10-2005 à 20:43:23