Je te montre ce que j'ai fait
pas tres propres je pense mais ca pourra te donner une piste :
<?php
require_once('./cnx.php');
$listemenu=array('id="admin"','id="creation"','id="maj"');
$listesousmenu=array('id="ssmenu1"','id="ssmenu2"','id="ssmenu3"');
if(isset($_GET['page'])){
extract($_GET);
switch ($page) {
case 'admin':
$listemenu[0]= 'id="lienactif" ';
$listesousmenu[0]= 'id="ssmenuactif" ';
break;
case 'creation';
$listemenu[1]= 'id="lienactif" ';
$listesousmenu[1]= 'id="ssmenuactif" ';
break;
case 'maj';
$listemenu[2]= 'id="lienactif" ';
$listesousmenu[2]= 'id="ssmenuactif" ';
break;
default: $page='accueil';
}
if(isset($ssmenu)){
$page=$page.$ssmenu;
}
}
else{
$page='accueil';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="style.css" href="../css/styleadmin.css">
<title>Le Gouessant : Spécialiste Nutrition Animal</title>
<script type="text/javascript">
<!--
function show(menu,ssmenu) {
if(document.getElementById(menu)){
document.getElementById(menu).style.padding="5px";
document.getElementById(menu).style.backgroundColor="#EF4B00";
document.getElementById(ssmenu).style.visibility = "visible";
document.getElementById('lienactif').style.padding="0px";
document.getElementById('lienactif').style.backgroundColor="#019444";
document.getElementById('ssmenuactif').style.visibility = "hidden";
}
}
function hidden(menu,ssmenu) {
if(document.getElementById(menu)){
document.getElementById(menu).style.padding="0px";
document.getElementById(menu).style.backgroundColor="#019444";
document.getElementById(ssmenu).style.visibility = "hidden";
document.getElementById('lienactif').style.padding="5px";
document.getElementById('lienactif').style.backgroundColor="#EF4B00";
document.getElementById('ssmenuactif').style.visibility = "visible";
}
}
var i=1;
function changer(){
if(i==1){
document.getElementById('contenuarticle').style.display = "none";
i=0;
}
else{
document.getElementById('contenuarticle').style.display = "block";
i=1;
}
}
-->
</script>
</head>
<body>
<div id="contour">
<div id="general">
<!-- Menu du site avec Logo-->
<a href="./index.php">
<img src="../images/logo.gif" id="mlogo" alt="Le Gouessant" title="Le Gouessant"/></a>&nbsp;
<div id="menulien">
<a <?php echo $listemenu[0] ?> href="./index.php?page=admin" onFocus="show('admini','ssmenu1');" onMouseOver="show('admin','ssmenu1');" onMouseOut="hidden('admin','ssmenu1')">
Administration</a>
<a <?php echo $listemenu[1] ?> href="./index.php?page=creation" onFocus="show('creation','ssmenu2');" onMouseOver="show('creation','ssmenu2');" onMouseOut="hidden('creation','ssmenu2')">
Création d'article</a>
<a <?php echo $listemenu[2]; ?> href="./index.php?page=maj" onFocus="show('maj','ssmenu3');" onMouseOver="show('maj','ssmenu3');" onMouseOut="hidden('maj','ssmenu3')">
Mise à jours</a>
</div>
<!--Sous menu du site, chaque catégorie possede sa parti.-->
<div class="ssmenu" <?php echo $listesousmenu[0] ?> onMouseOver="show('admin','ssmenu1');" onMouseOut="hidden('admin','ssmenu1')">
<a href="#">
Gestion des comptes</a>
<a href="#">
Gestion des catégories</a>
</div>
<div class="ssmenu" <?php echo $listesousmenu[1]; ?> onMouseOver="show('creation','ssmenu2');" onMouseOut="hidden('creation','ssmenu2')">
<a href="./index.php?page=creation&ssmenu=article">
Articles</a>
<a href="#">
Actualités</a>
<a href="#">
Recrutement</a>
</div>
<div class="ssmenu" <?php echo $listesousmenu[2]; ?> onMouseOver="show('maj','ssmenu3');" onMouseOut="hidden('maj','ssmenu3')">
<a href="./index.php?page=maj&ssmenu=article">Contenu</a>
<a href="#">
Articles</a>
<a href="#">
Actualités</a>
<a href="#">
Recrutement</a>
<a href="#">
Mise à jours</a>
</div>
<div class="contenu">
<?php
include($page.'.php');
?>
</div>
</div>
</div>
<?php
mysql_close();
?>
</body>
</html>
et le css j'ai mit normalement que ce qu'il faut oO car pas besoin de tout mettre.
body {
text-align: center;
font-family: Sans-Sherif;
background-color: #F4F1E8;
background-image: url(../images/background.gif);
background-repeat: repeat-x;
background-attachment: fixed;
}
div#contour{
background-color: #FFFFFF;
margin-left: auto;
margin-right: auto;
width: 800px;
padding: 10px;
}
div#general{
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
background-color: #FFFFFF;
background-image: url(../images/fondgeneral.gif);
background-repeat: repeat-x;
background-position: bottom;
}
A{
text-decoration: none;
}
img{
border: none;
}
/*CSS: mini menu dans le coin superieur droit */
div#minimenu {
font-size: 11px;
float: left;
}
/* CSS: menu niveau 1 */
img#mlogo{
float: left;
}
div#menulien{
background-color: #019444;
padding: 3px;
margin-top: 28px;
margin-top: 28px;
margin-left: 121px;
width: 600px;
}
#menulien A{
color: #FFFFFF;
margin-left: 10px;
}
#lienactif{
background-color: #EF4B00;
padding: 5px;
}
#menulien A:hover{
background-color: #EF4B00;
padding: 5px;
}
/*CSS: sous menu */
.ssmenu{
visibility: hidden;
background-color: #EF4B00;
width: 500px;
padding: 5px;
position: absolute;
margin-left: 125px;
/*Transparence bizarre, faire attention.*/
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
}
#ssmenuactif{
visibility: visible;
background-color: #EF4B00;
width: 500px;
padding: 5px;
position: absolute;
margin-left: 125px;
/*Transparence bizarre, faire attention.*/
filter:alpha(opacity=70);
-moz-opacity:0.70;
opacity: 0.70;
}
div.ssmenu A,A:visited{
color: #FFFFFF;
margin-left: 10px;
}
div.ssmenu A:hover{
background-color: #F39F00;
padding: 5px;
}
