8797 sujets

Développement web côté serveur, CMS

Un menu déroulant

bonjour a tous et toutes, voilà mon soucis d'aujourd'hui c'est que j'aimerai bie faire un menu de ce style http://users.skynet.be en php.

mon probleme ici c'est que lorsque je clic par exemple sur pierre a aiguisser ya une liste de 3 menu qui se déroule et lorsque je clic sur l'un d'entre eu cela me mene a la page demandée.. jusque la c'est ok mais le probleme c'est que lorsque je suis sur la page demander mon menu se referme, il ne reste pas ouvert, est ce qu'il y aurai moyen de faire ca en php?

merci bcp
Modifié par thanos (24 Apr 2007 - 14:47)
Salut,

Un menu fait en flash dans la rubrique "Standards du web et langages serveur" c'est pas très adapté je pense...

Sinon pour le site que t'as donné en exemple, le menu se déroule avec Javascript.
justement je ne veux plus de ce menu en flash...
je voudrai avoir le même menu que celui du site que j'ai cité
Salut,

Pour réaliser le menu que tu souhaites, tu peux t'aider du tutorial Un menu déroulant en CSS et XHTML (horizontal et vertical) présent sur le site d'alsa.

Ensuite, pour que le menu sur lequel tu as cliqué reste ouvert, tu peux faire comme cela, par exemple pour le menu 2 :

// on regarde si la page en cours correspond à un item du menu 2
$res = preg_match('/^Sous-Menu 2.1|Sous-Menu 2.2|Sous-Menu 2.3/', basename($_SERVER['PHP_SELF']);

// si tel est le cas, on ajoute la classe [i]block[/i] au menu 2
if ($res) {
  $class = 'class="block"';
} else {
  $class = '';
}
			
<dt onclick="javascript:montre('smenu2');" <?php echo $class; ?>>Menu 2</dt>
 <dd id="smenu2">
  <ul>
   <li><a href="#">Sous-Menu 2.1</a></li>
   <li><a href="#">Sous-Menu 2.2</a></li>
   <li><a href="#">Sous-Menu 2.3</a></li>
  </ul>
 </dd>


Ensuite, tu définies la classe block dans ta feuille de style, tel que :

dt.block { display: block; }


J'éspère que cela t'aidera Smiley cligne
sorry j'ai essayer mais je sais pas ou mettre le code que tu me propose désoler jsui nul lol merci

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>


<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>

<style type="text/css" media="screen">
 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

</style>
</head>

<body>



<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>
			
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>

			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.1</a></li>

				</ul>
			</dd>
	
</dl>



</body>
</html>

Modifié par thanos (23 Apr 2007 - 23:48)
Je te conseille de faire un fichier php qui contiendra ton menu. Ensuite, il te suffit d'inclure ce fichier dans chaque page de ton site à l'aide de la fonction require.

Ensuite dans le fichier contenant le menu, tu peux faire comme cela :

<?php
function checkPage($pattern)
{
  // on regarde si la page en cours correspond au pattern
  $res = preg_match('/^'. $pattern . '/', basename($_SERVER['PHP_SELF']));

  if ($res) {
    echo 'class="block"';
  } else {
    echo '';
  }
}

<dl id="menu">
  <dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>

  <dt onclick="javascript:montre('smenu2');" <?php checkPage('Sous-Menu 2.1|Sous-Menu 2.2|Sous-Menu 2.3); ?>>Menu 2</dt>
    <dd id="smenu2">
      <ul>
	<li><a href="#">Sous-Menu 2.1</a></li>
	<li><a href="#">Sous-Menu 2.2</a></li>
	<li><a href="#">Sous-Menu 2.3</a></li>
      </ul>
    </dd>	

  <dt onclick="javascript:montre('smenu3');" <?php checkPage('Sous-Menu 3.1|Sous-Menu 3.2|Sous-Menu 3.3|Sous-Menu 3.4|Sous-Menu 3.5|Sous-Menu 3.6); ?>>Menu 3</dt>
   <dd id="smenu3">
     <ul>
	<li><a href="#">Sous-Menu 3.1</a></li>
	<li><a href="#">Sous-Menu 3.2</a></li>
	<li><a href="#">Sous-Menu 3.3</a></li>
	<li><a href="#">Sous-Menu 3.4</a></li>
	<li><a href="#">Sous-Menu 3.5</a></li>
	<li><a href="#">Sous-Menu 3.6</a></li>
      </ul>
    </dd>

  <dt onclick="javascript:montre('smenu4');" <?php checkPage('Sous-Menu 4.1|Sous-Menu 4.2); ?>>Menu 4</dt>
    <dd id="smenu4">
      <ul>
	<li><a href="#">Sous-Menu 4.1</a></li>
	<li><a href="#">Sous-Menu 4.2</a></li>
      </ul>
    </dd>
</dl>

?>
c'est très gentil ymhotepa merci beaucoup je le fait immédiatement

merci


y marche pas le code ...
Modifié par thanos (24 Apr 2007 - 21:18)
Sujet clos
Aller à