par
sirakawa » 25 déc. 2014, 18:30
En général, les solutions que j'ai trouvées grâce à gargle.com donnent des menus collès à gauche avec les sous-menus s'affichant à la doite des options.
Je n'ai pas trouvé de solution vec le menu horizontal et les sous menus en dessous des options
En gros, si tu te sers de PHP et un minimum de Javascript tu peus t'en tirer avec:
un truc dans ce genre
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name='statut' content='final' />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Menus>title>
<script type="text/javascript" src="scripts.js"></script>
</head>
<?PHP
$menus = array ("voitures", "motos", "camions");
$menu0 = array ("Ford", "Jaguar", "Lotus");
$chaine ="
<body onload = 'cacher(0)'>
<div class= 'tableau'>
<div class ='ligne'><!-- ligne principal-->
<div class='cellule' onclick= 'basculer (1)'>
$menus[0];
</div>
<div class='cellule' onclick= 'basculer (2)'>
$menus[1]
</div>
<div class='cellule' onclick= 'basculer (3)'>
$menus[2]
</div>
</div> <!-- ligne principale-->
<div class ='ligne'> <!-- deuxième ligne contenant les sous-menus--
<div clas='ligne'>
<div class = 'cellule'> <!-- sousmenu1-->
<div class='tableau' id='1' style ='visibility:visible'>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[0]
</div>
</div>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[1]
</div>
</div>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[2]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>";
print "$chaine";
?>
[javascript]Nbelem = 1;
function cacher(id)
{
if ((id < 0) || (id > Nbelem))
{
}
else
{
if (id == 0)
{
for (i=1; i <=Nbelem; i++)
{
v =document.getElementById (i);
v.style.visibility= "hidden";
}
}
else
{
v =document.getElementById (id);
v.style.visibility= "hidden";
}
}
}
function basculer (id)
{
cacher(0);
v =document.getElementById (id);
v.style.visibility= "visible";
}
[/javascript]
*
{
font-family:Arial, "Sans-serif";
font-size:12pt;
background-color: antiquewhite;
}
a
{
font-size: 11pt;
}
*.cellule
{
display:table-cell;
padding-left:20px;
}
*.ligne
{
display:table-row;
}
*.decalee
{
padding-left:20px;
}
*.cachee
{
visibility:hidden;
}
*.tableau
{
display:table;
}
td
{
text-transform: none;
}
*.un
{
position: absolute;top:1%; left:1%; width:240px
}
En général, les solutions que j'ai trouvées grâce à gargle.com donnent des menus collès à gauche avec les sous-menus s'affichant à la doite des options.
Je n'ai pas trouvé de solution vec le menu horizontal et les sous menus en dessous des options
En gros, si tu te sers de PHP et un minimum de Javascript tu peus t'en tirer avec:
un truc dans ce genre
[php]<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name='statut' content='final' />
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" />
<title>Menus>title>
<script type="text/javascript" src="scripts.js"></script>
</head>
<?PHP
$menus = array ("voitures", "motos", "camions");
$menu0 = array ("Ford", "Jaguar", "Lotus");
$chaine ="
<body onload = 'cacher(0)'>
<div class= 'tableau'>
<div class ='ligne'><!-- ligne principal-->
<div class='cellule' onclick= 'basculer (1)'>
$menus[0];
</div>
<div class='cellule' onclick= 'basculer (2)'>
$menus[1]
</div>
<div class='cellule' onclick= 'basculer (3)'>
$menus[2]
</div>
</div> <!-- ligne principale-->
<div class ='ligne'> <!-- deuxième ligne contenant les sous-menus--
<div clas='ligne'>
<div class = 'cellule'> <!-- sousmenu1-->
<div class='tableau' id='1' style ='visibility:visible'>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[0]
</div>
</div>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[1]
</div>
</div>
<div class='ligne'>
<div class=' cellule decalee'>
$menu0[2]
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>";
print "$chaine";
?>[/php]
[javascript]Nbelem = 1;
function cacher(id)
{
if ((id < 0) || (id > Nbelem))
{
}
else
{
if (id == 0)
{
for (i=1; i <=Nbelem; i++)
{
v =document.getElementById (i);
v.style.visibility= "hidden";
}
}
else
{
v =document.getElementById (id);
v.style.visibility= "hidden";
}
}
}
function basculer (id)
{
cacher(0);
v =document.getElementById (id);
v.style.visibility= "visible";
}
[/javascript]
[css]*
{
font-family:Arial, "Sans-serif";
font-size:12pt;
background-color: antiquewhite;
}
a
{
font-size: 11pt;
}
*.cellule
{
display:table-cell;
padding-left:20px;
}
*.ligne
{
display:table-row;
}
*.decalee
{
padding-left:20px;
}
*.cachee
{
visibility:hidden;
}
*.tableau
{
display:table;
}
td
{
text-transform: none;
}
*.un
{
position: absolute;top:1%; left:1%; width:240px
}
[/css]
