Mammouth du PHP |
19672 Messages
26 juil. 2005, 19:55
BOn, voilà de quoi t'occuper quelques minutes: On remplace quelques éléments, on en rajoute un aussi:
Ton menu doit devenir ça :
<div id="barremenu">
<div id="menu">
<dl>
<dt onmouseover="javascript:montrer();"><a href="index.php" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu1');"><a href="forum/viewforum.php?f=10" title="Les news de Cybertests">News</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu2');"><a href="#" title="Les tests de jeux">Jeux</a></dt>
<dd id="smenu2">
<ul>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil">Tous les jeux</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=FPS">FPS</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RPG">RPG</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=RTS">RTS</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Action">Action</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Aventure">Aventure</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=MMORPG">MMORPG</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Arcade">Arcade</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Sport">Sport</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Simulation">Simulation</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Course">Course</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Shoot">Shoot</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Plate-Forme">Plate-Forme</a></li>
<li><a href="index.php?centre=tests&droite=fiche_tests_accueil&genre=Autre">Autres</a></li>
<li><a href="index.php?centre=jeux/ajouter_jeu&droite=fiche_tests_accueil">Ajouter un jeu</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu3');"><a href="#" title="Disponible prochainement">Films</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu4');"><a href="#">Liens</a></dt>
<dd id="smenu4">
<ul>
<li><a href="index.php?centre=liens/liens">Tous les liens</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Jeux">Jeux Vidéos</a></li>
<li><a href="index.php?centre=liens/liens&categorie=cinema">Cinéma</a></li>
<li><a href="index.php?centre=liens/liens&categorie=BD">BD</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Musique">Musique</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Informatique">Informatique</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Wallpapers">Wallpapers</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Humour">Humour</a></li>
<li><a href="index.php?centre=liens/liens&categorie=Autre">Autres</a></li>
<li><a href="index.php?centre=liens/ajouter_lien">Ajouter un lien</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montrer('smenu5');"><a href="#">Communauté</a></dt>
<dd id="smenu5">
<ul>
<li><a href="forum/index.php">Forum</a></li>
<li><a href="index.php?centre=contact">Nous contacter</a></li>
</ul>
</dd>
</dl>
</div>
</div>
Pour le JavaScript, mets ceci dans l'en-tête de ta page:
<script type="text/javascript">
<!--
function montrer(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>
Et enfin remplace toute la partie qui concerne le menu/sous-menu dans la feuille de style par ça :
Code : Tout sélectionner
#barremenu {
position: relative;
top: -20px;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* précision pour Opera */
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu dl {
float: left;
width: 8em;
}
#menu dt {
cursor: pointer;
text-align: center;
background: #ccc;
border: 1px solid gray;
margin: 1px;
color: #090060;
background-image: url(echantillon.jpg);
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
}
#menu dd {
display: none;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
border: 0;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: none;
padding: 0;
margin: 0;
}
#menu li a {
color: #090060;
background-image: none;
background-color: #BBBBBB;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
padding-top: 2px;
padding-bottom: 2px;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
margin: 0;
}
Avec ça, tu auras le bon affichage tant sous Firefox que sous IE.
Bon code.
Codez en pensant que celui qui maintiendra votre code est un psychopathe qui connait votre adresse 