Foros del Web » Creando para Internet » HTML »

Menú desplegable HTML, CSS Y JS

 Estas en el tema de Menú desplegable HTML, CSS Y JS en el foro de HTML en Foros del Web. Hola, estoy desarrollando un menú para una web y en uno de los campos me gustaria incluir un submenú nose si esto es posible, pero ...
  #1 (permalink)  
Antiguo 14/12/2007, 02:51
 
Fecha de Ingreso: mayo-2007
Mensajes: 17
Antigüedad: 16 años, 11 meses
Puntos: 0
Menú desplegable HTML, CSS Y JS
Hola, estoy desarrollando un menú para una web y en uno de los campos me gustaria incluir un submenú nose si esto es posible, pero me gustaria que fuese un menú desplegable os dejo el codigo por si me podeis ayudar.

Gracias de antemano !!!

* En negrita os indico donde me gustaria que fuera el menú desplegable.

<div id="sidebar">
<div id="menu">
<div id="cabecero_seccion"><strong>Biblioteca Virtual</strong></div>
<h2>Navigation Menu</h2>
<ul>
<li><a href="#" title="" accesskey="1"><strong>Que es </strong></a></li>
<li><a href="#" title="" accesskey="2"><strong>Como solicitar publicaciones </strong></a></li>
<li><a href="#" title="" accesskey="3"><strong>Quien puede solicitar </strong></a></li>
<li><a href="#" title="" accesskey="4"><strong>Materiales experimentales </strong></a></li>
<ul id="navmenu"><li><a href="#" title="" accesskey="5"><strong>Fondo Bibliográfico </strong></a>
<ul>
<li><a href="#">Sub nav ite</a></li></ul>
<li>
<div id="cabecero_seccion"><strong>Editorial Virtual </strong></div>
</ul>
<li><a href="#" title="" accesskey="8"><strong>Que es </strong></a></li>
<li><a href="#" title="" accesskey="9"><strong>Quien puede publicar</strong></a></li>
<li><a href="#" title="" accesskey="10"><strong>Como se publica</strong></a></li>
<li><a href="#" title="" accesskey="11"><strong>Donde se publicaran</strong></a></li>
<li><a href="#" title="" accesskey="12"><strong>Derechos de autor</strong></a></li>
</ul>
</div>
  #2 (permalink)  
Antiguo 14/12/2007, 07:36
 
Fecha de Ingreso: diciembre-2007
Mensajes: 2
Antigüedad: 16 años, 4 meses
Puntos: 0
Re: Menú desplegable HTML, CSS Y JS
HOLA TE PASO EL CODIGO ENTERO DE UNA MENU DESPLEGABLE QUE HICE UNA VES ESPERO QUE TE SIRVA

<? include "seguridad.php";
$nivel_acceso=3; // Bajo
include "control_nivel.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<script language='JavaScript' type='text/javascript' src='TSScript/prototype.lite.js'></script>
<script language='JavaScript' type='text/javascript' src='TSScript/moo.fx.js'></script>
<script language='JavaScript' type='text/javascript' src='TSScript/moo.fx.pack.js'></script>
<script language='JavaScript' type='text/javascript' src='TSScript/TSAccordion/TSAccordion.js'></script>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
</head>

<body>
<table width="172" border="0" align="center">
<tr>
<td>
<div align="center">
<? switch($_SESSION ['nivel']) {
case 1: $niv = "Alto"; break;
case 2: $niv = "Medio"; break;
case 3: $niv = "Bajo"; break;
default: $niv = "Error"; break;
}
echo'<span class="texto">Hola </span><span class="bordo"><strong>'.$_SESSION ['nomyap'].'</strong></span><span class="texto">, su nivel de acceso es: </span><span class="bordo"><strong>'.$niv.'.</strong></span>';
?>
</div>
</td>
</tr>
</table>
<table width="172" border="0" align="center"><tr><td>
<div id="TSAccordionContent626539" style="position:absolute; border:1px solid #FFFFFF;">
<div class="titulomenu" title="TSAccordionHead96146"><a href="#TSAccordionHead96146">Clientes</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: visible; opacity: 0.9999; height: 1%;">
<a href="clientes/alta_cli.php" target="centro">· Insertar clientes</a>
<a href="clientes/listar_cli.php" target="centro">· Listar clientes</a>
<a href="clientes/backup_cli.php" target="centro">· Backup listado de clientes</a>
<a href="clientes/verif_cumples.php" target="centro">· Cumpleaños hoy</a>
<a href="clientes/verif_ahora.php" target="centro">· Verificar Cumples ahora</a>
<br>
</div>
<div class="titulomenu" title="Opciones de Mailing"><a href="#TSAccordionHead96146">Mailing</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: visible; opacity: 0.9999; height: 1%;">
<a href="mailing/nueva_novedad.php" target="centro">· Crear Nuevo</a>
<a href="mailing/mostrar_novedades.php" target="centro">· Listar Mailings</a>
<a href="mailing/mostrar_historial.php" target="centro">· Ver historial de envíos</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead374083"><a href="#TSAccordionHead374083">Pases</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="pases/alta_pase.php" target="centro">· Nuevo pase</a>
<a href="pases/listar_pases.php" target="centro">· Listar pases</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead256130"><a href="#TSAccordionHead256130">Cursos</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="cursos/alta_curso.php" target="centro">· Nuevo curso</a>
<a href="cursos/listar_cursos.php" target="centro">· Listar cursos</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead2077"><a href="#TSAccordionHead2077">Eventos</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="eventos/alta_evento.php" target="centro">· Nuevo evento</a>
<a href="eventos/listar_eventos.php" target="centro">· Listar eventos</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead376432"><a href="#TSAccordionHead376432">Horarios</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="horarios/alta_horario.php" target="centro">· Insertar horario</a>
<a href="horarios/listar_horarios.php" target="centro">· Listar horarios</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead961819"><a href="#TSAccordionHead961819">Staff</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="staff/alta_staff.php" target="centro"> · Insertar staff</a>
<a href="staff/listar_staff.php" target="centro">· Listar staff</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead579646"><a href="#TSAccordionHead579646">Galería de Imagenes</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="galeria_img/alta_imagen.php" target="centro"> · Insertar imagen</a>
<a href="galeria_img/listar_imagenes.php" target="centro">· Ver galería</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead329938"><a href="#TSAccordionHead329938">Administradores</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="usuarios/alta_usuario.php" target="centro"> · Alta administrador</a>
<a href="usuarios/listar_usuarios.php" target="centro">· Listar administradores</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead712836"><a href="#TSAccordionHead712836">Salir</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="salir.php" target="_parent">· Salir del sistema</a>
<br>
</div>
</div>
</td></tr></table>
<script type="text/javascript">TSAccordionLoad("TSAccordionContent626 539", "titulomenu", "opcionmenu");</script>
</body>
</html>
Última edición por leo_chicho; 14/12/2007 a las 07:47
  #3 (permalink)  
Antiguo 14/12/2007, 08:15
 
Fecha de Ingreso: diciembre-2007
Mensajes: 2
Antigüedad: 16 años, 4 meses
Puntos: 0
Re: Menú desplegable HTML, CSS Y JS
Cita:
Iniciado por leo_chicho Ver Mensaje
HOLA TE PASO EL CODIGO ENTERO DE UNA MENU DESPLEGABLE QUE HICE UNA VES ESPERO QUE TE SIRVA

<? include "seguridad.php";
$nivel_acceso=3; // Bajo
include "control_nivel.php";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
<script language='JavaScript' type='text/javascript' src='TSScript/prototype.lite.js'></script>
<script language='JavaScript' type='text/javascript' src='TSScript/moo.fx.js'></script>
<script language='JavaScript' type='text/javascript' src='TSScript/moo.fx.pack.js'></script>
<script language='JavaScript' type='text/javascript' src='TSScript/TSAccordion/TSAccordion.js'></script>
<link rel="STYLESHEET" type="text/css" href="estilos.css">
</head>

<body>
<table width="172" border="0" align="center">
<tr>
<td>
<div align="center">
<? switch($_SESSION ['nivel']) {
case 1: $niv = "Alto"; break;
case 2: $niv = "Medio"; break;
case 3: $niv = "Bajo"; break;
default: $niv = "Error"; break;
}
echo'<span class="texto">Hola </span><span class="bordo"><strong>'.$_SESSION ['nomyap'].'</strong></span><span class="texto">, su nivel de acceso es: </span><span class="bordo"><strong>'.$niv.'.</strong></span>';
?>
</div>
</td>
</tr>
</table>
<table width="172" border="0" align="center"><tr><td>
<div id="TSAccordionContent626539" style="position:absolute; border:1px solid #FFFFFF;">
<div class="titulomenu" title="TSAccordionHead96146"><a href="#TSAccordionHead96146">Clientes</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: visible; opacity: 0.9999; height: 1%;">
<a href="clientes/alta_cli.php" target="centro">· Insertar clientes</a>
<a href="clientes/listar_cli.php" target="centro">· Listar clientes</a>
<a href="clientes/backup_cli.php" target="centro">· Backup listado de clientes</a>
<a href="clientes/verif_cumples.php" target="centro">· Cumpleaños hoy</a>
<a href="clientes/verif_ahora.php" target="centro">· Verificar Cumples ahora</a>
<br>
</div>
<div class="titulomenu" title="Opciones de Mailing"><a href="#TSAccordionHead96146">Mailing</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: visible; opacity: 0.9999; height: 1%;">
<a href="mailing/nueva_novedad.php" target="centro">· Crear Nuevo</a>
<a href="mailing/mostrar_novedades.php" target="centro">· Listar Mailings</a>
<a href="mailing/mostrar_historial.php" target="centro">· Ver historial de envíos</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead374083"><a href="#TSAccordionHead374083">Pases</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="pases/alta_pase.php" target="centro">· Nuevo pase</a>
<a href="pases/listar_pases.php" target="centro">· Listar pases</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead256130"><a href="#TSAccordionHead256130">Cursos</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="cursos/alta_curso.php" target="centro">· Nuevo curso</a>
<a href="cursos/listar_cursos.php" target="centro">· Listar cursos</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead2077"><a href="#TSAccordionHead2077">Eventos</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="eventos/alta_evento.php" target="centro">· Nuevo evento</a>
<a href="eventos/listar_eventos.php" target="centro">· Listar eventos</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead376432"><a href="#TSAccordionHead376432">Horarios</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="horarios/alta_horario.php" target="centro">· Insertar horario</a>
<a href="horarios/listar_horarios.php" target="centro">· Listar horarios</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead961819"><a href="#TSAccordionHead961819">Staff</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="staff/alta_staff.php" target="centro"> · Insertar staff</a>
<a href="staff/listar_staff.php" target="centro">· Listar staff</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead579646"><a href="#TSAccordionHead579646">Galería de Imagenes</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="galeria_img/alta_imagen.php" target="centro"> · Insertar imagen</a>
<a href="galeria_img/listar_imagenes.php" target="centro">· Ver galería</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead329938"><a href="#TSAccordionHead329938">Administradores</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="usuarios/alta_usuario.php" target="centro"> · Alta administrador</a>
<a href="usuarios/listar_usuarios.php" target="centro">· Listar administradores</a>
<br>
</div>
<div class="titulomenu" title="TSAccordionHead712836"><a href="#TSAccordionHead712836">Salir</a></div>
<div class="opcionmenu" style="overflow: hidden; visibility: hidden; opacity: 0; height: 0px;">
<a href="salir.php" target="_parent">· Salir del sistema</a>
<br>
</div>
</div>
</td></tr></table>
<script type="text/javascript">TSAccordionLoad("TSAccordionContent626 539", "titulomenu", "opcionmenu");</script>
</body>
</html>
  #4 (permalink)  
Antiguo 17/01/2009, 17:19
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 550
Antigüedad: 15 años, 7 meses
Puntos: 9
Respuesta: Menú desplegable HTML, CSS Y JS
aki eh subido un menu desplegable

lo eh utilisado para hacer esta web mira

www.l2foxdie.es



aki esta el link del menu :

http://www.sitiumweb.com.ar/descarga...esplegable.rar
  #5 (permalink)  
Antiguo 18/01/2009, 12:13
 
Fecha de Ingreso: enero-2009
Mensajes: 22
Antigüedad: 15 años, 3 meses
Puntos: 0
Respuesta: Menú desplegable HTML, CSS Y JS
gracias, andaba buscando uno
  #6 (permalink)  
Antiguo 18/03/2009, 07:36
 
Fecha de Ingreso: noviembre-2007
Mensajes: 1
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Menú desplegable HTML, CSS Y JS
Cita:
Iniciado por danistrein Ver Mensaje
aki eh subido un menu desplegable

lo eh utilisado para hacer esta web mira


aki esta el link del menu :
Expectacular el menu, no tengo palabras para describirte como me ayudaste con esto, solo que tengo un problema, cuando se me despliega el menu, el scrollbar vuelve a la parte superior, es raro, es como si cargara la pagina otra vez, puede solucionarse?
  #7 (permalink)  
Antiguo 18/03/2009, 07:43
Avatar de danistrein  
Fecha de Ingreso: septiembre-2008
Ubicación: Salta Capital
Mensajes: 550
Antigüedad: 15 años, 7 meses
Puntos: 9
Respuesta: Menú desplegable HTML, CSS Y JS
Cita:
Iniciado por HP_Gladiator Ver Mensaje
Expectacular el menu, no tengo palabras para describirte como me ayudaste con esto, solo que tengo un problema, cuando se me despliega el menu, el scrollbar vuelve a la parte superior, es raro, es como si cargara la pagina otra vez, puede solucionarse?
jha ese problema lo tube yo tambien lo que pasa me olvide de modificarla ya como yo lo use pero es facil modificarlo para no tener ese problema solo tienes que

modificar la parte principal del menu y remplasarle
este codigo:

Código HTML:
<a onclick="tagle('sub-2');" href="#">Menu</a>
por este
Código HTML:
<a onclick="tagle('sub-2');return false;" href="#">Menu</a>
segun el tagle('es el menu que deseas abrir')


espero que te sirba
  #8 (permalink)  
Antiguo 20/03/2009, 20:59
 
Fecha de Ingreso: agosto-2007
Ubicación: Barcelona
Mensajes: 39
Antigüedad: 16 años, 7 meses
Puntos: 0
Respuesta: Menú desplegable HTML, CSS Y JS
hola, danistrein:

Algunas alertas sobre tu código:

no respetas la separación contenido / presentación / comportamiento

no es accesible pues utilizas js obstrusivo que no permite acceder a la información cuando éste está deshabilitado

tu código carece de semántica, pues utilizas tablas para maquetar, aunque estas solo debrían usarse para datos tabulares...
  #9 (permalink)  
Antiguo 21/03/2009, 09:59
 
Fecha de Ingreso: marzo-2009
Mensajes: 3
Antigüedad: 15 años
Puntos: 0
Respuesta: Menú desplegable HTML, CSS Y JS
Hola yo tengo un codigo estupendo, para menus deplegables, con js y estilos, no afecta a navegadores y es 100 valido, acepta semi tranparencias, puedes ponerle tu propio diseño
Última edición por webosiris; 21/03/2009 a las 11:18 Razón: elimino urls y firma dentro del mensaje
  #10 (permalink)  
Antiguo 21/03/2009, 10:37
 
Fecha de Ingreso: marzo-2009
Mensajes: 5
Antigüedad: 15 años
Puntos: 0
Respuesta: Menú desplegable HTML, CSS Y JS
Hola, soy nueva aqui y me gustaria conocer tus menus desplegables pero ingreso a tu pagina y no los encuentro podrias dejar un ejemplo colgado como nuestro otro amigo.

Gracias.
  #11 (permalink)  
Antiguo 21/03/2009, 11:20
Avatar de jomaruro
Colaborador
  
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 9 meses
Puntos: 361
Respuesta: Menú desplegable HTML, CSS Y JS
Hola:

Puedes visitar esta página.

O puedes buscar en Google "menu desplegable css" por ejemplo.

Saludos.
  #12 (permalink)  
Antiguo 22/03/2009, 09:33
Avatar de Mikmoro
Colaborador
  
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 6 meses
Puntos: 280
Respuesta: Menú desplegable HTML, CSS Y JS
También puedes ver en las http://www.forosdelweb.com/f53/faqs-...ml#post2453726 varios ejemplos, o también aquí .
__________________
Visita mi nueva web idplus.org
  #13 (permalink)  
Antiguo 18/03/2010, 22:14
 
Fecha de Ingreso: marzo-2010
Mensajes: 9
Antigüedad: 14 años
Puntos: 0
Sonrisa Respuesta: Menú desplegable HTML, CSS Y JS
como hago un menu emergente en html que contenga 5 o 6 menus y que cada uno de ellos ccontenga 5 submenus tengo que hacer una pagina web para la u super urgente aayudemne porfavor con el codigo html
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

SíEste tema le ha gustado a 3 personas (incluyéndote)


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 12:26.