Tengo una consulta, quiero hacer unos menús dinámicos, dependiendo el tipo de usuario le aparecerán los menús y submenús correspondientes. He buscado por internet y encontré uno que hace prácticamente lo que quiero (está hecho con JavaScript), el problema está en qué no sé cómo implementarlo de una forma "fácil y limpia" con las consultas que haría con la base de datos (donde tengo la información de los menús), aquí les dejo el código que me encontré en internet.
Código:
Y la parte de html<script language=JavaScript>
<!--
content = new Array ();
content [0] = new Array (false, new Array('sub_0_1','sub_0_2','sub_0_3'));
content [1] = new Array (false, new Array('sub_1_1','sub_1_2','sub_1_3'));
content [2] = new Array (false, new Array('sub_2_1','sub_2_2','sub_2_3'));
content [3] = new Array (false, new Array('sub_3_1','sub_3_2','sub_3_3'));
isOPERA = (navigator.userAgent.indexOf('Opera') >= 0)? true : false;
isIE = (document.all && !isOPERA)? true : false;
isDOM = (document.getElementById && !isIE && !isOPERA)? true : false;
function processTree (id) {
if (content [id][0]) {
for (i = 0; i < content [id][1].length; i++)
hide (content [id][1][i]);
content [id][0] = false;
} else {
for (i = 0; i < content [id][1].length; i++)
show (content [id][1][i], 'table-row');
content [id][0] = true;
}
return false;
}
function show (id, displayValue) {
if (isDOM || isOPERA)
document.getElementById(id).style.display = (displayValue)? displayValue : "block";
else if (isIE)
document.all[id].style.display = "block";
}
function hide (id) {
if (isDOM || isOPERA)
document.getElementById(id).style.display = "none";
else if (isIE)
document.all[id].style.display = "none";
}
if (isDOM || isIE || isOPERA){
document.writeln('<style type="text/css">');
document.writeln('.SubItemRow \{ display: none; \}');
document.writeln('</style>');
}
// -->
</script>
Código:
Nota: No deseo menús desplegables.<table width=253 height=40 border=0 cellpadding=0 cellspacing=1>
<tr>
<td width=9 class=Item>+</td>
<td width=147 height=20 class=Item><a href=./ class=Item onClick="processTree (0); return false;">MENU 1</a></td>
<td width=93 class=Item> </td>
</tr>
<tr id='sub_0_1' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width=93 class=SubItem><a href="#">SUBMENU 1.1</a></td>
</tr>
<tr id='sub_0_2' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width=93 class=SubItem><a href="#">SUBMENU 1.2</a></td>
</tr>
<tr id='sub_0_3' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width=93 class=SubItem><a href="#">SUBMENU 1.3</a></td>
</tr>
<tr>
<td width=9 class=Item>+</td>
<td width=147 height=20 class=Item><a href=./ class=Item onClick="processTree (1); return false;">MENU 2 </a></td>
<td width=93 class=Item> </td>
</tr>
<tr id='sub_1_1' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 2.1</a></td>
</tr>
<tr id='sub_1_2' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 2.2</a></td>
</tr>
<tr id='sub_1_3' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 2.3</a></td>
</tr>
<tr>
<td width=9 class=Item>+</td>
<td width=147 height=20 class=Item><a href=./ class=Item onClick="processTree (2); return false;">MENU 3</a></td>
<td width=93 class=Item> </td>
</tr>
<tr id='sub_2_1' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 3.1</a></td>
</tr>
<tr id='sub_2_2' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 3.2</a></td>
</tr>
<tr id='sub_2_3' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 3.3</a></td>
</tr>
<tr>
<td width=9 class=Item>+</td>
<td width=147 height=20 class=Item><a href=./ class=Item onClick="processTree (3); return false;">MENU 4</a></td>
<td width=93 class=Item> </td>
</tr>
<tr id='sub_3_1' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 4.1</a></td>
</tr>
<tr id='sub_3_2' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 4.2</a></td>
</tr>
<tr id='sub_3_3' class=SubItemRow>
<td width=9> </td>
<td width=147 height=20 class=SubItem> </td>
<td width="93" class="SubItem"><a href="#">SUBMENU 4.3</a></td>
</tr>
</table>
O si tienen algún otro método más práctico para éste tipo de problemas se le agredecería bastante.
Salu2
