Foros del Web » Programando para Internet » PHP »

Menu desplegable o expandible en php

 Estas en el tema de Menu desplegable o expandible en php en el foro de PHP en Foros del Web. Hola! Espero puedan ayudarme. Soy un completo novato en esto de la programación web, y estoy terminando este sitio: acuem.110mb.com Me gustaría cambiar el menú ...
  #1 (permalink)  
Antiguo 23/02/2007, 07:50
 
Fecha de Ingreso: febrero-2007
Mensajes: 2
Antigüedad: 17 años, 9 meses
Puntos: 0
Menu desplegable o expandible en php
Hola! Espero puedan ayudarme. Soy un completo novato en esto de la programación web, y estoy terminando este sitio: acuem.110mb.com

Me gustaría cambiar el menú de la izquierda por un menú expandible o desplegable, de modo que sea un menú con varios submenús...El menú está en un archivo separado (menu_nav.php), al que se hace referencia en index.php :S Ustedes sabrán mucho más que yo en esos asuntos!

Busqué en internet, y conseguí algunos scripts php, y los incluí en menu_nav.php, y funcionan, pero la página se recarga cada vez que se hace click en una opción del menú, y me gustaría una alternativa en la que no haya que recargar la página.

Sé que con javascript se puede hacer ese tipo de menú, pero al colocar el código java en menu_nav.php, no funciona...Gracias!!
  #2 (permalink)  
Antiguo 23/02/2007, 07:56
Avatar de david_M_G  
Fecha de Ingreso: febrero-2005
Mensajes: 938
Antigüedad: 19 años, 9 meses
Puntos: 20
Re: Menu desplegable o expandible en php
No es que se pueda hacer con JavaScript, es que se debe hacer con JavaScript.

PHP sólo actúa como lenguaje de servidor, es decir, realiza operaciones antes de mostrar la web al visitante, pero nada más. El diseño se basa en HTML y para factores especiales, como el menú que nombras, JavaScript.

Que lo tengas que adaptar para que lo cargue el PHP es distinto.

Suerte.
  #3 (permalink)  
Antiguo 23/02/2007, 11:26
 
Fecha de Ingreso: febrero-2007
Mensajes: 8
Antigüedad: 17 años, 9 meses
Puntos: 0
Re: Menu desplegable o expandible en php
Aunque soy novato en PHP en esto creo que si te puedo ayudar.

Para empezar me parece que no estás separando tu página en marcos verdad? todo lo tienes en el mismo marco, osea una sola pagina principal.
Eso es lo primero que debes cambiar. ya despues puedes poner el codigo para tu menu desplegable en la pagina del lado izquierdo y dirigirla a la principal.

te paso el siguiente codigo java para un menu desplegable que funciona perfectamente,


<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>MenuBar</title>
<base target="principal">
<SCRIPT LANGUAGE=javascript>
constMaxItem=2


function fnDispThis(active)
{
for (i=1; i < constMaxItem+1; i++)
{
if (i!=active)
{
document.all("sub"+i).style.display="NONE"
}
else
{
document.all("sub"+active).style.display="BLOCK"
}
}
}
</SCRIPT>
<style>
TD.list
{
Font-family: arial;
COLOR: #333333;
TEXT-DECORATION: none
}
TD.list A:link
{
Font-family: arial;
COLOR: #333333;
TEXT-DECORATION: none
}
TD.list A:active
{
Font-family: arial;
COLOR: #333333;
TEXT-DECORATION: none
}
TD.list A:visited
{
Font-family: arial;
COLOR: #333333;
TEXT-DECORATION: none
}
TD.list A:hover
{
Font-family: arial;
COLOR: #FF6600;
TEXT-DECORATION: none
}


</style>
<script language="JavaScript" fptype="dynamicanimation">
<!--



function dynAnimation() {}
function clickSwapImg() {}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body onload="dynAnimation();">
<p><img border="0" src="images/MenuPrincipal.jpg" width="174" height="36"></p>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="166" class="list" style="Cursor:HAND;" onClick="fnDispThis(1)"><b>
<font size="2"><img src="images/term.jpg" width="174" height="29"></font></b><br>
<div id="sub1" style="Display:'NONE';"> <font size="1">&nbsp;&nbsp;&nbsp;<a href="61254.htm">Control
</a><br>
&nbsp;&nbsp;&nbsp;<a href="mp.htm">Adm</a><br>
&nbsp;&nbsp;&nbsp;<a href="2541.htm">Logística</a><br>
&nbsp;&nbsp;&nbsp;</font><a href="2541.htm"><font size="1">
Personal</font></a><br>
</div></td>
</tr>
<tr>
<td class="list" onClick="fnDispThis(2)" style="Cursor:HAND;"><b> <font size="2"><img src="images/tras.jpg" width="174" height="29"></font></b><br>
<div id="sub2" style="Display:'NONE';"> <font size="1">&nbsp;&nbsp;&nbsp;<a href="1221.htm">Control
</a><br>
&nbsp;&nbsp;&nbsp;<a href="5254.htm">Prod.</a><br>
&nbsp;&nbsp;&nbsp;<a href="2541.htm">Logística</a><br>
&nbsp;&nbsp;&nbsp;</font><a href="5245.htm"><font size="1">Personal</font></a><br>
</div></td>
</tr>


</body>

</html>


este codigo lo unico que hace es contraer algunos elementos de las tablas generadas y lo importante para poder hacerla funcinar con mas opciones es la siguiente

constMaxItem=2 es la variable que te controla el numero maxico de items osea opciones del menu
onClick="fnDispThis(2)" esta es la funciona java que te expande la tabla que le estas pasando como parametro en este caso (2).
id="sub2" es el nombre que le das a cada una de las tablas creadas aqui nadamas puedes ir incrementando el numero

lo que tienes que hacer para ponerle mas elementos es copiar la tabla

<tr>
<td class="list" onClick="fnDispThis(2)" style="Cursor:HAND;"><b> <font size="2"><img src="images/tras.jpg" width="174" height="29"></font></b><br>
<div id="sub2" style="Display:'NONE';"> <font size="1">&nbsp;&nbsp;&nbsp;<a href="1221.htm">Control
</a><br>
&nbsp;&nbsp;&nbsp;<a href="5254.htm">Prod.</a><br>
&nbsp;&nbsp;&nbsp;<a href="2541.htm">Logística</a><br>
&nbsp;&nbsp;&nbsp;</font><a href="5245.htm"><font size="1">Personal</font></a><br>
</div></td>
</tr>

y modificarle los parametros.

obviamente la primera vez que la visualices en el navegador no la vas a poder ver bien, pero si le ajustas algunas imagenes se vera bien.

saludos.

Gamuhz
  #4 (permalink)  
Antiguo 23/02/2007, 13:43
 
Fecha de Ingreso: febrero-2007
Mensajes: 2
Antigüedad: 17 años, 9 meses
Puntos: 0
Re: Menu desplegable o expandible en php
Muchas gracias david y gamuhz...Ahora, como puedo dividir la página en marcos? ¿Sólo con eso ya queda adaptada para que funcione el código javascript? Gracias por el menú, veo que funciona, pero me faltaría adaptarlo a la página para que funcione con ella...

Les adjunto el código de index.php, y el de el archivo del menú (menu_nav.php) para ver si pueden echarme una mano...


index.php (solo copio la parte donde hace referencia al menú, el resto no lo puse porque es el contenido):

<html><head><title>:: ACUEM :: Asociaci&oacute;n Cient&iacute;fica Universitaria de Estudiantes de Medicina - ULA</title>



<link rel="stylesheet" type="text/css" href="estilos.css">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">

<!--

body {

background-color: #000000;

}

.style3 {

font-size: 10px;

font-family: Arial, Helvetica, sans-serif;

color: #003399;

}

-->

</style>

<link rel="shortcut icon" href="images/favicon.ico" >

<style type="text/css">

<!--

.style10 {color: #000066}

.style11 {

color: #003399;

font-size: 16px;

}

.style12 {color: #003399}

-->

</style>

</head>

<body>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="692">

<tbody>

<tr>

<td colspan="2">

<!-- Etiquetas Funcionales Globales Código: EFG -->

<!-- Etiquetas Funcionales Globales Código: EFG --></td>

</tr>

<tr>

<td colspan="2"><?php include("encabezado.php"); ?></td>

</tr>

<tr>

<td colspan="2" valign="top"><table background="images/fondo.gif" cellpadding="3" cellspacing="3" width="100%">

<tbody>

<tr>

<td background="images/bg.gif" valign="top" width="23%">

<!-- Menu -->



<?php include("menu_nav.php"); ?> </td>

<td valign="top" background="images/bg.gif" class="celda2">

<!-- Contenido pag inicio -->



Y este es el menú (menu_nav.php):



<?



################################################## ######

# MENU DE NAVEGACIÓN DEL SITIO

################################################## ######



echo"<table width='150' border='0' cellpadding='0' cellspacing='0' bgcolor='#FFFFFF'>

<tbody>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>



<tr>

<td valign='top' width='14'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' width='136' class='texto_normal'><strong> <a href='quienes_somos.php'>¿Quienes somos?</a></strong></td>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='estructura.php'>Estructura</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='actividades.php'>Actividades</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='eventos.php'>Eventos</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top' width='14'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' width='136' class='texto_normal'><strong> <a href='miembros.php'>Miembros</a></strong></td>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top' width='14'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' width='136' class='texto_normal'><strong> <a href='cpca.php'>CPCA</a></strong></td>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top' width='14'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' width='136' class='texto_normal'><strong> <a href='cpri.php'>CPRI</a></strong></td>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top' width='14'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' width='136' class='texto_normal'><strong> <a href='CPAIS'>cpais.php</a></strong></td>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top' width='14'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' width='136' class='texto_normal'><strong> <a href='cpdcyt.php'>CPDCYT</a></strong></td>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top' width='14'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' width='136' class='texto_normal'><strong> <a href='galeria.php'>Galería de Fotos</a></strong></td>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='membresia.php'>Solicitud de Membresía</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='acuemnut.php'>ACUEM-NUT</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>


<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='pamsa.php'>PAMSA</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='ippnw.php'>IPPNW</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='socivem.php'>SOCIVEM</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

<tr>

<td valign='top'><img src='images/triangulo.gif' height='12' width='12'></td>

<td valign='top' class='texto_normal'><strong> <a href='descargas.php'>Descargas</a></strong>

</tr>

<tr>

<td colspan='2'><img src='images/spacer.gif' height='5' width='1'></td>

</tr>

</tbody></table>";

?>

Espero puedan ayudarme...Saludos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 21:47.