Foros del Web » Creando para Internet » CSS »

Crear menú Desplegable

Estas en el tema de Crear menú Desplegable en el foro de CSS en Foros del Web. Hola buenas tardes, me gustaría crear un menú desplegable en mi pagina web. He estado buscando antes de postear pero lo que yo intento hacer ...
  #1 (permalink)  
Antiguo 28/12/2008, 11:39
 
Fecha de Ingreso: noviembre-2008
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Crear menú Desplegable

Hola buenas tardes, me gustaría crear un menú desplegable en mi pagina web. He estado buscando antes de postear pero lo que yo intento hacer es diferente...Ojalá me podais echar una mano.

Me explico:

Tengo un bloque Menú donde cada cosa tiene su hipervínculo. Eejemplo:

Alimentación
Dietas
Frutas
Comidas
Ejercicio


Lo que me interesaría crear sería lo siguiente. Al pinchar en "Frutas", me gustaría que se desplegara un pequeño menú de tal forma que se quedara asi :

Alimentación
Dietas
Frutas
· Plátanos
· Manzanas
· Melón
· Sandía

Comidas
Ejercicio


Es posible? Muchas gracias.
  #2 (permalink)  
Antiguo 28/12/2008, 11:41
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Crear menú Desplegable

¿Te refieres a algo como esto?

http://www.araudi.net/Desplegables/m...plegable7.html
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 28/12/2008, 11:51
 
Fecha de Ingreso: noviembre-2008
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Respuesta: Crear menú Desplegable

Hola, gracias por responder tan rápido.

Si algo asi, pero sin los colores de fondo (en cada opción). Simplemente una línea que se despliega tal cual puse en el post anterior, muchas gracias.
  #4 (permalink)  
Antiguo 28/12/2008, 13:04
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Crear menú Desplegable

Bueno, eso ya depende de que tú edites el ejemplo para que quede como quieres...

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #5 (permalink)  
Antiguo 29/12/2008, 06:34
 
Fecha de Ingreso: noviembre-2008
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Respuesta: Crear menú Desplegable

Genial, muchas gracias. Pero y como puedo coger el ejemplo (el código) para ir yo probando cosas?

Gracias.
  #6 (permalink)  
Antiguo 29/12/2008, 06:48
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Crear menú Desplegable

Pues si utilizas Firefox dándole a Ctrl+U
Pero te pongo el código:
Código:
<!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="es" lang="es-es">
<head>
<title>Menus desplegable solo CSS ejemplo 7 - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Keywords" content="recursos, css, diseño web, xhtml, software libre" />
<meta name="Description" content="Pagina dedicada a recursos de diseño web con CSS, en castellano" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iru&ntilde;ea SLL" />
<meta name="Subject" content="Recursos CSS" />
<meta name="Language" content="espa&ntilde;ol" />
<meta name="Robots" content="index, follow" />
<link rel="alternate" href="http://www.araudi.net/indice.html" title="Indice de contenidos" media="all" lang="es" />
<link rel="stylesheet" href="css/menu-7.css" type="text/css" />
<style type="text/css">
#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {display: block;
position: relative;width: 160px;border: solid 1px #fff;border-top: none;background-color: #6CC;}
#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {background-color: #6CC;border-bottom: solid 1px #6CC;color: #000;border-left: solid 8px #359BB8;border-right: solid 8px #359BB8;
}
</style>
<!--[if IE]><style>#menu ul li span.nivel1 {display: none;}#menu ul li.nivel1 {margin-bottom:-1px}#menu ul li a:active ul {margin-bottom: 1px;}</style><![endif]-->

</head>
<body>
<div id="menu">
<ul>
  <li class="nivel1 primera" tabindex="1"><span class="nivel1">Opción 1</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="http://www.google.es">Opción 1.1</a></li>
		<li><a href="#">Opción 1.2</a></li>
	</ul>

<!--[if IE]></td></tr></table></a><![endif]-->
  </li>
  <li class="nivel1" tabindex="2"><span class="nivel1">Opción 2</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="#">Opción 2.1</a></li>
		<li><a href="http://www.google.es">Opción 2.2</a></li>
		<li><a href="#">Opción 2.3</a></li>

		<li><a href="#">Opción 2.4</a></li>
		<li><a href="#">Opción 2.5</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1" tabindex="3"><span class="nivel1">Opción 3</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="http://www.google.es">Opción 3.1</a></li>

		<li><a href="#">Opción 3.2</a></li>
		<li><a href="#">Opción 3.3</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1" tabindex="4"><span class="nivel1">Opción 4</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 4<table class="falsa"><tr><td><![endif]-->
	<ul>
		<li class="primera"><a href="#">Opción 4.1</a></li>

		<li><a href="#">Opción 4.2</a></li>
		<li><a href="#">Opción 4.3</a></li>
		<li><a href="#">Opción 4.4</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
  <li class="nivel1" tabindex="5"><span class="nivel1">Opción 5</span>
<!--[if IE]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]-->

	<ul>
		<li class="primera"><a href="#">Opción 5.1</a></li>
		<li><a href="#">Opción 5.2</a></li>
		<li><a href="#">Opción 5.3</a></li>
	</ul>
<!--[if IE]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

</body>
</html>
Un saludo!!

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #7 (permalink)  
Antiguo 29/12/2008, 10:09
 
Fecha de Ingreso: noviembre-2008
Mensajes: 9
Antigüedad: 9 años
Puntos: 0
Respuesta: Crear menú Desplegable

Gracias, y cual sería el procedimiento? Es decir, este codigo he de meterlo en un archivo CSS o simplemente lo copio y lo meto en un bloque de mi web?

Gracias.
  #8 (permalink)  
Antiguo 29/12/2008, 12:20
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Crear menú Desplegable

Te contesto:
Para saber donde lo tienes que colocar has de leer algo más sobre CSS por ejemplo aquí:
http://www.librosweb.es/css/

Un saludo

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
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




La zona horaria es GMT -6. Ahora son las 05:25.