menu vertical développable avec css
Posté : 22 août 2006, 17:18
njour,
J'ai actuellement un menu vertical statique avec des liens du style index.php?id_page=100
Mes pages sont donc toutes reprises dans une table sql "table" avec les colonnes suivantes "ID, titre, mots-clés, descriptions,contenu, id_parent"
le contenu reprenant le liens absolu de la page
J'aimerai que ce menu deviennent dynamique c'est à dire que le menu se développe à l'endroit de la page en cours et qu'il ferme les autres menu.
mon site se trouve à l'adresse suivante : http://cpdt.wallonie.be
Les solutions javascript que j'ai essayée permettait au menu de développer plus ou moins les différentes parties, mais il refermait tout dès qu'on chargeait une page étant donné que c'est une structure php avec la partie menu qui est incluse dans l'index.
Il faudrait qu'il retienne l'id de la page du lien cliqué et qu'il s'ouvre à cet endroit...
Quelqu'un pourrait-il m'aider... ça doit être un truc avec des get et post m'a-t-on dit mais je n'y comprend rien...
MErci
Je pensais à un menu du style :
Merci d'avance
Gregius le néophyte
J'ai actuellement un menu vertical statique avec des liens du style index.php?id_page=100
Mes pages sont donc toutes reprises dans une table sql "table" avec les colonnes suivantes "ID, titre, mots-clés, descriptions,contenu, id_parent"
le contenu reprenant le liens absolu de la page
J'aimerai que ce menu deviennent dynamique c'est à dire que le menu se développe à l'endroit de la page en cours et qu'il ferme les autres menu.
mon site se trouve à l'adresse suivante : http://cpdt.wallonie.be
Les solutions javascript que j'ai essayée permettait au menu de développer plus ou moins les différentes parties, mais il refermait tout dès qu'on chargeait une page étant donné que c'est une structure php avec la partie menu qui est incluse dans l'index.
Il faudrait qu'il retienne l'id de la page du lien cliqué et qu'il s'ouvre à cet endroit...
Quelqu'un pourrait-il m'aider... ça doit être un truc avec des get et post m'a-t-on dit mais je n'y comprend rien...
MErci
Je pensais à un menu du style :
Code : Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Vertical expanding menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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">
/* CSS from toturials of www.alsacreations.com/articles */
<!--
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;
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
-->
</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="#">Sub Menu 2.1</a></li>
<li><a href="#">Sub Menu 2.2</a></li>
<li><a href="#">Sub Menu 2.3</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
<li><a href="#">Sub Menu 3.1</a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">Sub Menu 4.1</a></li>
<li><a href="#">Sub Menu 4.1</a></li>
</ul>
</dd>
</dl>
<div class="mentions">Raphaël GOETTER<br />
<a href="http://www.alsacreations.com">Alsacréations</a><br />
<a href="http://tutorials.alsacreations.com/deroulant/">Explanations</a></div>
</body>
</html>Merci d'avance
Gregius le néophyte
