PHPfrance

la communauté d'entraide francophone dédiée au PHP

Menu déroulant dynamique

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Menu déroulant dynamique

Re: Menu déroulant dynamique

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
}

Re: Menu déroulant dynamique

par tof73 » 24 déc. 2014, 22:43

les 2 manières de faire sont expliquées là :
http://www.developpez.net/forums/d598/w ... ees-entre/

Menu déroulant dynamique

par Laurentf » 24 déc. 2014, 22:21

Re Bonjour à tous,

je suis confronté à un nouveau problème:

Je souhaite mettre en place 2 menu déroulants
Le premier avec une liste de valeurs fixes (pas de soucis pour cette manipulation)
le second avec une liste d'options prise dans une base de données (la non plus pas de soucis)
Le problème viens du fait que je souhaite que le 2ème menu n'affiche que les informations qui répondent à l'option du premier menu

Par exemple:
Menu 1 options: Voiture, Scooter, Bateau, Avion
Le menu 2 n'affichera alors que les données relative à la sélection du menu 1 soit:

Menu 1 : Avion
Menu 2: Airbus, Falcon, Boeing, Embraer

Menu 1: Voiture
Menu 2: Audi, BMW, Renault Peugeot

Avez vous une idée de comment parvenir à ce résultat?

Merci d'avance