|
|
|
|
Bonjour à tous :))
Sur mon site, j'ai un menu que j'aimerais rendre un peu interactif avec javascript :)
Sur mon menu j'ai un lien Accueil. J'aimerais, quand je clique dessus, les sous-menus s'affichent à la suite.
En d'autres termes plus simples, j'aimerais ajouter quand je clique sur accueil, ce bout de code :
<td bgcolor=#336185" class="liensousmenu">
<img src="entre_ss_titre.png" alt=""/>
<img src="fleche.png" alt=""/><a class="menuitems" href="index.php?page=identification">Identification</a>
</td>
</tr>
<a class="menuitems" href="index.php?page=news" onclick="ouvre_ss_menu">Accueil</a>
Configuration: Windows XP Firefox 2.0.0.6
Bsr
|
Oui effectivement ca me charge directement la page news, cependant, sous accueil, j'aurai d'autres sections, genre Identification, Recherche Utilisateur etc... et je pensais que ca pouvais être sympa :)
|
Bonjour
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style> * { font-family : arial; } .menu { font-size : 12pt; font-weight : bold; font-color : #0000C0; } .sous_menu { font-size : 10pt; font-weight : normal; font-color : #0000C0; margin-left : 20px; display : none; } </style> <script type="text/javascript"> <!-- function toggle(menuID) { var elt = document.getElementById(menuID); // Recherche du style en cours : attention le style en cours est read-only! var eltStyle = elt.currentStyle || window.getComputedStyle(elt, null); if (eltStyle.display == "none") { elt.style.display = "block"; } else { elt.style.display = "none"; } } //--> </script> </head> <body> <table class="menu"> <tr> <td> <a href="javascript:void(0);" onclick="toggle('accueil')">Accueil</a> <table id="accueil" class="sous_menu"> <tr> <td> <a href="javascript:void(0);">Identification</a> </td> </tr> <tr> <td> <a href="javascript:void(0);">Recherche</a> </td> </tr> </table> </td> </tr> <tr> <td> <a href="javascript:void(0);" onclick="toggle('etudiant')">Etudiants</a> <table id="etudiant" class="sous_menu"> <tr> <td> <a href="javascript:void(0);">Sous-menu 1</a> </td> </tr> <tr> <td> <a href="javascript:void(0);">Sous-menu 2</a> </td> </tr> </table> </td> </tr> </table> </body> </html> je te laisse essayer et t'en inspirer tester sous IE et FF Voilà PhP Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ... |
Lorsqu'une option d'un menu permet de masquer/afficher des sous-menus comme par ex l'option Etudiant on n'associe généralement pas de lien avec. Seules les sous-options du sous-menu sont censées rediriger vers un lien.
*
{
font-family : arial;
}
.menu
{
font-size : 12pt;
font-weight : bold;
font-color : #0000C0;
}
.sous_menu
{
font-size : 10pt;
font-weight : normal;
font-color : #0000C0;
margin-left : 20px;
}
.titre
{
font-size : 18pt;
font-weight : bold;
}
main.php (page de démarrage) : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <?php include('menu.php'); ?> </body> </html> menu.php : <?php
$menuID="";
if (isset($_GET["menuID"])) $menuID=$_GET["menuID"];
?>
<table class="menu" width="200px">
<tr>
<td>
<a href="page_accueil.php?menuID=accueil">Accueil</a>
<?php
if ($menuID == "accueil")
{
include("sousmenu_accueil.php");
}
?>
</td>
</tr>
<tr>
<td>
<a href="page_etudiant.php?menuID=etudiant">Etudiants</a>
<?php
if ($menuID == "etudiant")
{
include("sousmenu_etudiant.php");
}
?>
</td>
</tr>
</table>
page_acccueil.php : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Page accueil</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <table> <tr> <td> <?php include('menu.php'); ?> </td> <td> <p class="titre">Vous êtes sur la page accueil ! </p> </td> </tr> </table> </body> </html> page_etudiant.php : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Page étudiant</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <table> <tr> <td> <?php include('menu.php'); ?> </td> <td> <p class="titre">Vous êtes sur la page étudiant ! </p> </td> </tr> </table> </body> </html> Copie toutes les pages dans un sous-répertoire accessible à ton serveur PHP en les nommants comme indiqué puis lance http://(adresse de ton serveu PHP)/main.php PhP Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ... |
Merci encore pour ton aide ;)
|
Répondre à PhP
|