Menu déroulant modifiable ... [AUTRE QUESTION]

par **Inazad** » 30 déc. 2005, 23:59

Désolé mais je crois que le tableau est vraiment indispensable car c'est un site pour une école.

Ils veulent que tout soit modifiable a partir d'un panneau d'administration...

D'en plus que je ne connais pas vraiment le CSS, mais si quelqu'un pourrait me montrer la voie..

Le schéma du site pourrait doit a peu près ressembler a ceci (ce n'est pas à l'échelle):

Le menu à lui seul occupe 80pix.

Quelqu'un pourrait me montrer un exemple, svp?!

Merci,

Inazad

par **Inazad** » 29 déc. 2005, 18:55

Merci encore,

je verrai et si j'ai dautres questions, je vous le dirai!

Merci!

A++

par **Cyrano** » 29 déc. 2005, 11:59

Le tableau est-il absolument indispensable ?

Si tu fais un petit tour des tuto d'Alsacreations, tu vas découvrir que les tableaux ne doivent pas être utilisés pour faire de la mise en page : un tableau est utile pour afficher des données "tabulaires", c'est à dire en général des données en nombre variable provenant d'une base de données. Mais on ne parles pas de menu dans ce cas.

Si c'est pour un problème de positionnement, tu peux encore une fois très bien te dispenser d'un tableau. Un exemple que j'ai découvert à la fin de l'automne dernier de mise en page complexe sans tableau : http://www.voyages-sncf.com : affiche le code source et trouve les tableaux si tu peux (il y en a un petit que tu ne trouveras même pas dans le code de la page)

par **Inazad** » 29 déc. 2005, 08:33

Maintenant, je voudrais mettre ce menu dans un tableau.

Car j'aimerais faire un site web ainsi..

Comment faire pour que ce menu reste dans le tableau et qu'il ne dépasse pas ou bien qu'il soit par dessus...

Merci de votre aide!

A++

par **Inazad** » 29 déc. 2005, 05:00

Merci a AlexBad.

Merci a tous aussi!

A++

par **Inazad** » 29 déc. 2005, 03:30

Merci, j'ai trouvé!

Mais maintenant, tous les menus se déroule...

Je n'y comprends vraiment rien!

Voici une image:

Voici le code:

Code : Tout sélectionner

<html>

<head>
<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('Menu '+i)) {document.getElementById('Menu '+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">

/* CSS issu des tutoriels http://css.alsacreations.com */
body {
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 70%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 80pix;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

</style>
</head>
<body>
<?

include("admin/protec/informations.php3");

$retour = mysql_query("SELECT * FROM menu");

echo '<dl id="menu">';
    while($donnees = mysql_fetch_array($retour))
    {
	echo '<dt onmouseover="javascript:montre(\'' . $donnees['nom'] . '\');">' . $donnees['nom'] . '</dt>';
	echo '<dd id="' . $donnees['nom'] . '" onmouseover="javascript:montre(\'' . $donnees['nom'] . '\');" onmouseout="javascript:montre();">';
	
			$menu = $donnees['id'];   
			   echo '<ul>';
                          $sous_menu = mysql_query("SELECT * FROM sousmenu WHERE menu=\"$menu\"");

					while ($dsous_menu = mysql_fetch_array($sous_menu))
					{
					echo '<li><a href=\"' . $dsous_menu['lien'] . '\">' . $dsous_menu['option'] . '</a></li>';
					}
			   echo '</ul>';
			   
	 echo '</dd>';
	}
echo '</dl>'; 
mysql_close();
?>


</body></html>

Quelqu'un a une idée pour stoppée cela?!?!

Merci,

Inazad

par **Truc** » 29 déc. 2005, 02:47

Comment je fais maintenant pour les boucles ?? Ce que je ne sais pas, c'est comment faire pour que dans une boucle, cela détermine le titre du menu, les sous-menu et ainsi de suite...

ça dépend de la structure des tables, c'est suivant la ou les requetes que la construction dynamique (boucles) se fera.

L'exemple de Cyrano n'en comporte pas mais la suite ressemblera tout à fait à ça.

On peut ne faire qu'une requete en regroupant par catégorie et sous catégories mais on peut tout aussi bien avoir plusieurs requetes et donc plusieus boucles.

Il nous faudrait lastructure de la (des) table(s) pour savoir dans quel sens il faut s'orienter et éventuellement retoucher.

par **Inazad** » 29 déc. 2005, 01:58

Bonjour,

merci de me répondre aussi vite!

J'ai essayé d'afficher le menu tel que tel mais avec PHP.

Voici mon code de menu.php :

Code : Tout sélectionner

<?
/* Menu du site  */
include("admin/protec/informations.php3");
mysql_connect($db_host, $db_user, $db_pass);
mysql_select_db("menu");


include("menu_css_js.php");

echo "<dl id=\"menu\">

		<dt onclick=\"javascript:montre();\"><a href=\"#\">Menu 1</a></dt>
			<br>
		<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>	
<br>
		<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>
<br>
		<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>";
?>

Comment je fais maintenant pour les boucles ?? Ce que je ne sais pas, c'est comment faire pour que dans une boucle, cela détermine le titre du menu, les sous-menu et ainsi de suite...

J'aurais une idée du genre on compte le nombre de tables qui sont des menus, ex.: toutes les tables commençant par menu_abc, et on fais en sorte que la boucle affiche le nombre de "catégorie" (les <dt>, je ne savais pas trop comment exprimer cela...) qu'il en faut.

On fais la même chose pour les tables du genre: smenu_xxx, qui elles seront les sous-menus.

Bien sûr, on va donner une genre de id_menu pour déterminer les places des sous-menus.

Je sais que moi je ne suis pas assez "avancé" pour créé ce genre de truc, c'est pour cela que je fais appel à vous.

Merci encore de votre aide,

Inazad

par **Cyrano** » 29 déc. 2005, 01:35

Si tu sais récupérer les données et créer des boucles pour extraire ligne après lignes, tu n'as plus besoin de grand chose d'autre et pas obligatoirement besoin de recourir syématiquement à echo(). Exemple:

<?php
//... 
// code de rcupération des données dans ta base
//...
?>
<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>
<?php
while($ligne = mysql_fatch_array($exec_requete))
{
?>
                <li><a href="<?php echo($ligne['lien_menu']); ?>"><?php echo($ligne['texte_lien_menu']); ?></a></li>
<?php
}
?>
            </ul>
<?php
//...
/* etc ... */

par **Inazad** » 29 déc. 2005, 01:23

Je sais comment faire des boucles, des reqûetes et des pages d'administration...

Le seul hic, c'est que j'essaie de le rendre dynamique et cela ne fonctionne pas..

Dois-je fais plusieur "echo"..?

C'est ça le problème, je ne sais pas quoi faire...

Merci de m'aider!

A++

par **Truc** » 29 déc. 2005, 00:22

- Comment pourrais-je rendre tout ce script dynamique?

avec le php et des boucles

- Comment faire pour les menus et sous-menus soit tirés d'une base de donnée?

avec des requetes sql

- Est-ce que tout cela pourrait être modifiable (je pense que oui) via une page d'administration ?

avec un formulaire et des requetes de mise a jour

Ce sont des choses pas vraiment compliquées je te conseil donc de faire un ou 2 tutoriaux pour comprendre:
phpdebutant
phpfrance
siteduzero

puis une fois que tu auras comprit les bases on s'attaquera à ceci

par **Inazad** » 28 déc. 2005, 23:01

Bon voici ce que j'ai trouvé grâce à Cyrano (Merci Cyrano!):

Code : Tout sélectionner

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

<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: 15%; /* 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>

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

J'ai quelques questions:

- Comment pourrais-je rendre tout ce script dynamique?
- Comment faire pour les menus et sous-menus soit tirés d'une base de donnée?
- Est-ce que tout cela pourrait être modifiable (je pense que oui) via une page d'administration ?

Merci encore à toi Cyrano!

A+

par **Cyrano** » 28 déc. 2005, 21:55

Bon, je crois que je commence à comprendre ce que tu veux faire : tu devrais jeter un oeil sur ce tuto de Alsacreations où tu as des chances de trouver ce que tu cherches.

par **Inazad** » 28 déc. 2005, 20:45

Merci de ton aide mais je n'y connais rien en Javascript...

Pour ce qui est de rendre dynamique certaine partie, j'ai comme l'impression que je ne sais même pas quoi faire!

C'est pour cela que je vous demande de l'aide en m'indiquant quoi garder et quoi rendre dynamique, etc.

S'il vous plait,

Inazad

par **Truc** » 28 déc. 2005, 01:54

effectivement j'avais survolé le code proposé (trop long

) mais en y regardant de plus près il "suffit" (aie, j'ai osé le dire

) de rendre dynamique la partie comprise entre:

<!-------------Texte et lien des menus et sous menus------------->

et

<!------------------------------------Fonctions------------------------>

pour cela tu exécute les requetes normalement et tu récupère le résultat que tu affecte au variables javascript.

Pour ce qui est de ton probleme de modification j'insite sur le faite qu'un formulaire séparé pour ajouter des enregistrements dans la BD est la meilleur idée (d'ailleurs la seule

).

La liste sera donc mise a jour automatiquement.

Par contre il y a un peu de boulot alors je préconise le port du casque et des gants pour le chantier

Menu déroulant modifiable ... [AUTRE QUESTION]

Répondre

Étendre la vue Revue du sujet : Menu déroulant modifiable ... [AUTRE QUESTION]