Ce tutoriel a été publié par nirupan sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Commençons tout d'abord par la structure du menu, le xhtml et le Javascripts,
Ouvrez votre templates overall_header_new
Chercher la balise </head>
Ajouter avant cette balise

Code:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
  for (var i = 1; i<=10; i++) {
      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
  }
if (d) {d.style.display='block';}
}
//-->
</script> 

<!--[if !IE]> <-->
<style type="text/CSS">
#smenu li ul {
position:absolute;
}
</style>
<!--><![endif]-->

Puis chercher

Code:

<tr>
                        <!-- BEGIN switch_logo_center -->
                <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="0" /></a></td>
                        <!-- END switch_logo_center -->
                    </tr>

Et juste derrière coller ce code :

Code:

<tr width="100%"><td align="center" style="background-image: url('Votre_Image( pas obligatoire )');background-repeat: no-repeat; background-position: top;" width="100%" class="submenu">
  <div id="smenu">
<ul>
  <li><a href="#">#NOM</a>
 <ul>
    <li><a href="#lien">#NOM</a></li>
 </ul>
</li>
<li><a href="#lien">#NOM</a></li>
 <li><a href="#">#NOM</a>
    <ul>
    <li><a href="#lien">#NOM</a></li>
</div></td></tr>

Maintenant que le menu est en place, pour lui donner le design aller dans votre feuille de style, et collez ce code :

Code:

#smenu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
background-color: #couleur;
border: 1px solid #couleur;
}
#smenu li {
float:left;
margin:auto;
padding:0;
}
#smenu li a {
display:block;
color:white;
text-decoration:none;
padding:5px;
}
#smenu li a:hover {
color:#couleur;
background-image: url('#Image');
}
#smenu ul li:hover ul {
display:block;
}
#smenu li:hover ul li {
float:none;
}
#smenu ul li ul {
display:none;
}
#smenu li ul {
position:absolute;
}
#smenu {
height:35px;
background-image: url('#Image');
background-repeat: no-repeat;
}

Voilà, vous avez fait un menu dynamique^^, vous pouvez quand meme vous aider de ces tuto afin d'apporter un plus au menu :
http://www.sos-forum.com/astuces-f3/divers-effet-de-lumiere-t807.htm
http://www.sos-forum.com/astuces-f3/templates-affichage-prive-d-une-zone-en-phpbb2-t676.htm
http://www.sos-forum.com/astuces-f3/script-code-creer-une-ancre-t277.htm

- - - - - - - - - - - - - - - - - - - - - - -
Remplacer :
#image par une adresse d'image ex : http://i84.servimg.com/u/f84/11/44/03/73/logo10.gif
#couleur par un code de couleur ex : #000000
#Nom par un nom ex : SOS-Forum

Voilà, j'espère que ce tuto vous plaieras et si vous voullez voir un exemple ce de menu : c'est mon forum ^^'