Menu vertical : probleme

Salut à tous,je suis aller chercher sur internet un menu vertical pour mon site :

ici



Le problème est un peut dure a expliquer mais bon je vais quand même essayer !

J'ai mis dans mon répertoire les 2 fichier java script ,j'ai copier le texte de menuv.css dans man page css.

Dans chaque page html j'ai insérer sa pour le menu sachant que pour l'instant j'ai plus de 30 pages !:

<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menu">
<li><a href="index.htm">Accueil</a> <!-- Menu acceuil -->
</li>

<li><a href="#menu3" >Fond d'écran</a> <!-- Menu Fond d'ecran -->
<ul>

<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</li>

<li><a href="#menu2" >Logiciels</a> <!-- Menu logiciel -->
<ul>

<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</li>

<li><a href="#menu2" >jeux reseaux</a> <!-- Menu jeux resaux -->
<ul>

<li><a href="#">Track Mania F</a></li>
<li><a href="#">Battlefild Heros</a></li>
<li><a href="#">Call Of Duty 4 </a></li>
<li><a href="#">Medal Of Honor </a></li>
<li><a href="#">Need For Speed </a></li>
<li><a href="#">Wolfenstein </a></li>
</ul>
</li>

<li><a href="#menu2" >Video</a> <!-- Menu video -->
<ul>

<li><a href="#">élément 1</a></li>
<li><a href="#">élément 2</a></li>
<li><a href="#">élément 3</a></li>
</ul>
</li>
<li><a href="#menu2" >Jeux</a> <!-- Menu jeux -->
<ul>

<li><a href="#">SUDOKU</a></li>
<li><a href="#">SNACK</a></li>
<li><a href="#">DIRTY BIKE 2</a></li>
<li><a href="#">BOWLING</a></li>
<li><a href="#">BILLARD</a></li>
<li><a href="#">BILLARD</a></li>
<li><a href="#">YETI 5</a></li>
<li><a href="#">AVALANCHE</a></li>
<li><a href="#">S.M.O Arena</a></li>
<li><a href="#">DIRTY BIKE 1</a></li>
<li><a href="#">TRIAL</a></li>
<li><a href="#">Trials Mountain Heights</a></li>
<li><a href="#">Trials Construction </a></li>
<li><a href="#">Roller Coaster</a></li>
<li><a href="#">Bumper Ball</a></li>
<li><a href="#">Bike mania 2</a></li>
<li><a href="#">Magic Pen</a></li>
<li><a href="#">Age of War</a></li>
<li><a href="#">Tic Tac Toe</a></li>
<li><a href="#">Bowman 2</a></li>
<li><a href="#">Reversi</a></li>
<li><a href="#">Park a lot</a></li>
<li><a href="#">Parking perfection</a></li>
<li><a href="#">Parking perfection 3</a></li>
<li><a href="#">Quick park</a></li>
<li><a href="#">Planet of the Forklift Kid</a></li>
<li><a href="#">puissance 4</a></li>
</ul>
</li>
<li><a href="#menu2" >Tchat'</a> <!-- Menu Tchat-->
<ul>

<li><a href="#">T'chat n°1</a></li>
<li><a href="#">T'chat n°2</a></li>
<li><a href="#">T'chat n°3 : MSN</a></li>
</ul>
</li>

<li><a href="#menu2" >Batch</a> <!-- Menu batch-->
<ul>

<li><a href="#">Eteindre ordninateur</a></li>
<li><a href="#">Annuler l'extinction de l'ordinateur</a></li>
<li><a href="#">Lancer plusieur logiciel a la fois</a></li>
<li><a href="#">Faire planter leur ordinateur sans risque</a></li>
</ul>
</li>

<li><a href="#menu2" >Divers</a> <!-- Menu Divers -->
<ul>

<li><a href="#">Météo</a></li>
<li><a href="#">Programme TV</a></li>
<li><a href="#">Google Hearth</a></li>
<li><a href="#">Calculatrice</a></li>
<li><a href="#">Blague Page Web</a></li>
<li><a href="#">Traducteur</a></li>
<li><a href="#">Radio</a></li>
</ul>
</li>

<li><a href="#menu2" >Site Favoris</a> <!-- Menu Site favoris -->

</li>
<li><a href="#menu2" >Commentaire</a> <!-- Menu commentaire -->
</li>

<li><a href="#menu2" >Contact</a> <!-- Menu Contact -->
</li>
</ul>

<script type="text/javascript">
initMenu();
</script>




Voici maintenant mon problème :
Quand j'ajouterai une case a mon menu il faudra que je réouvre chaque page et que je change le texte du menu!


SVP y a t il un moyen pour éviter cela ?


Ajout du 01-07-2008 à 15:18:

J'ai penser a mettre du html dans ma page css mais comment ?...

...et est ce que sa marchera ?



Ajout du 01-07-2008 à 19:50:

Personne ?

Ajout du 01-07-2008 à 21:08:

Je pense avoir trouver !

j'ai créer une page htm ou il y a juste mon menu
après dans chaque page je vais placer sa :

<div id="menu" src="menu.htm">
</div>

Sa marche mais j le problème c'est que mon menu se retrouve en plein milieu de la page.


Alors soit il faut que je modifie mon css :

body
{
width: 900px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("images/fond.png"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc :p */
}

#en_tete
{
width: 900px;
height: 154px;
background-image: url("images/entete2.png");
background-repeat: no-repeat;
margin-bottom: 10px;
}


/* Le menu */

.menu{
position:absolute;
/* solve a Opera7/IE display bug */
width:152px;
width/**/:130px;
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
margin:0;
padding:0;
}

.menu span{
display:none;
}

.menu ul{
border-top: 1px #000 solid;
border-left: 1px #000 solid;
border-right: 1px #000 solid;
margin:0;
padding:0;
position:absolute; /* important */
width:152px;
width/**/:130px;
}

.menu li ul{
visibility:hidden;
}

.menu li ul{
margin-left:130px; /* be careful */
margin-top:-24px;
}

.menu a{
text-align:center;
background-color: #2D4E7E;
color:#FFFFFF;
text-weight:bold;
display:block;
width:130px;
border-bottom: 1px #000 solid;
text-decoration:none;
margin:0;
padding:3px 0 3px 0; /* em units can creat little graphic bug in mozilla */
font-family:Comic Sans MS
}

.menu a:hover{
background-color: #000;
}

/* for a mozilla better display with key nav */
.menu a:focus{
background-color: #000;
}

.menu span{
/* hide some accessibility stuff */
display:none;
}

.menu li{
width:130px;
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
}

/* IE PC selector */
* html .menu li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
}

a.linkOver{
background-color: #2D4E7E;
}



/* Le corps de la page */

#corps
{
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */

color: #F1F1F1;
background-color: #2D4E7E; /* Une couleur de fond pour le corps */
background-image: url("images/decor.png");
background-repeat: repeat-x; /* Une petite image de fond qui se répètera horizontalement en haut */

border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}




#corps h1 /* Tous les titres h1 du corps */
{
color: #DEDFDC;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2 /* Tous les titres h2 du corps */
{
height: 30px;

background-image: url("images/tete.png"); /* Une petite image de fond sur les titres h2 */
background-repeat: no-repeat; /* L'image ne se répètera pas, elle sera à gauche du titre */

padding-left: 30px;
color: #DEDFDC;
text-align: left;
}

#corps a

{
color : #FFFFFF
}






/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page
{
padding: 5px;

text-align: center;

color: #DEDFDC;
background-color: #2D4E7E;
background-image: url("images/decor.png");
background-repeat: repeat-x;

border: 2px solid black;
}








Soit il faut que je change un truc la dedant :


<div id="menu" src="menu.htm">
</div>


Il reste un petit probleme !

Comment on fait ?

Vous pouvez m'aidez ?


Ajout du 01-07-2008 à 21:22:

En faite sa marche pô !


Je sait plus quoi faire

bonjour,

ton menu mets le dans une page
et ensuite tu appeles la page avec <?php include('mapagemenu.html');?>

++

Le 31-08-2008 à 09:50, RV :
bonjour,

ton menu mets le dans une page
et ensuite tu appeles la page avec <?php include('mapagemenu.html');?>

++

je comfirme c'est vraiment la meilleur solution pour l'include

si tu veut plus d'explication contact moi j'ai déjà fais ce genre de truc j'ai eu la même galère .

max69530 : tu avais résolu ce probleme dans un precedent fil, tu as modifié tes pages ?
@+