Foros del Web » Creando para Internet » HTML »

Menu desplegable

Estas en el tema de Menu desplegable en el foro de HTML en Foros del Web. Buenas si entran aqui verán que en colecciones aparece como un menú deplegable. Estoy aprendiendo a hacer páginas web y me gutaría saber como se ...
  #1 (permalink)  
Antiguo 21/03/2011, 18:10
 
Fecha de Ingreso: febrero-2011
Mensajes: 175
Antigüedad: 6 años, 10 meses
Puntos: 1
Menu desplegable

Buenas si entran aqui verán que en colecciones aparece como un menú deplegable. Estoy aprendiendo a hacer páginas web y me gutaría saber como se consigue eso. Alguien puede decirme que codigo hay que insertar para poner por otra categoria más.

Por ejemplo una categoría debajo de la que ya hay que se llamase PIEDRAS.
  #2 (permalink)  
Antiguo 22/03/2011, 10:15
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Menu desplegable

si hubieras revisado un podo verias que en la misma pagina esta el código de ese menu.
Código HTML:
Ver original
  1. <ul class="menu" id="menu" style="text-align:left">
  2.    
  3.     <div style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es/' class='m_2k9_menu_horizontal2_link'>Inicio</a></div></div><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es//empresa-idispaces-348.html' class='º'>Empresa</a></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'>Colecciones<ul><li><a  href='http://www.idispaces.com/es//space-amp-soul-437.html' >Space & Soul</a></li></ul></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'>Proyectos<ul></ul></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'>Materiales<ul></ul></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es//noticias-417.html' class='º'>Noticias</a></div></li><li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'><div style='padding:0px 5px 0px 5px;'><a href='http://www.idispaces.com/es//datos-de-contacto-258.html' class='º'>Contacto</a></div></li>
  4.    
  5.     </ul>

Si no lo entiendes, busca en google "menus con css"
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 23/03/2011, 03:47
 
Fecha de Ingreso: febrero-2011
Mensajes: 175
Antigüedad: 6 años, 10 meses
Puntos: 1
Respuesta: Menu desplegable

Si, si, si el codigo lo he visto. Pero lo que no se. es específicamente que parte del código hace ea funcion.
  #4 (permalink)  
Antiguo 23/03/2011, 08:47
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Menu desplegable

este es el secreto
<li style='float:left;
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 23/03/2011, 09:09
 
Fecha de Ingreso: octubre-2010
Ubicación: La Plata
Mensajes: 63
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable

gvenom,me darias un ejemplo de un menu asi? por que realmente necesito poner uno y creo que sabes bien como se hace, estoy programando en html si me dieras una respuesta para que lo haga en html te lo agradeceria mucho
  #6 (permalink)  
Antiguo 23/03/2011, 11:35
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: Menu desplegable

el codigo de arriba es html y css. Si quieres aplicarlo de esa forma, tienes que usar CSS.

Date una vuelta aca para que aprendas a hacerlos
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #7 (permalink)  
Antiguo 25/03/2011, 06:49
 
Fecha de Ingreso: febrero-2011
Mensajes: 175
Antigüedad: 6 años, 10 meses
Puntos: 1
Respuesta: Menu desplegable

Intento poner otro apartado debajo de space&soul pero no me sale.

Puede alguien poner un ejemplo?

gracias
  #8 (permalink)  
Antiguo 25/03/2011, 08:19
Avatar de [NiRVaNa]  
Fecha de Ingreso: abril-2004
Ubicación: Someplace In The Middle Of Nowhere!
Mensajes: 325
Antigüedad: 13 años, 8 meses
Puntos: 6
Información Respuesta: Menu desplegable

Éste sería el código acomodado
Código:
<ul class="menu" id="menu" style="text-align:left">
	<div style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es/' class='m_2k9_menu_horizontal2_link'>Inicio</a>
		</div>
	</div>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es//empresa-idispaces-348.html' class='º'>Empresa</a>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>Colecciones
			<ul>
				<li>
					<a  href='http://www.idispaces.com/es//space-amp-soul-437.html' >Space & Soul</a>
				</li>
			</ul>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>Proyectos
			<ul></ul>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>Materiales
			<ul></ul>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es//noticias-417.html' class='º'>Noticias</a>
		</div>
	</li>
	<li style='float:left; border-left: solid 1px #4c3c2f; width:98px; height:65px;'>
		<div style='padding:0px 5px 0px 5px;'>
			<a href='http://www.idispaces.com/es//datos-de-contacto-258.html' class='º'>Contacto</a>
		</div>
	</li>
</ul>
Si te fijas, despues de colecciones se abre una etiqueta de lista desordenada <UL> es decir, que se crea una lista dentro de una lista, logrando así lo necesario para el menu desplegable...

Tendria que quedarte una estructura de este este estilo:
Código:
<ul>
	<li>algo</li>
	<li>algo mas
		<ul>
			<li>algo dentro de algo mas</li>
			<li>algo mas dentro de algo mas</li>
		<ul>
	</li>
	<li>no va mas</li>
<ul>
Por lo tanto, para agregar algo despues de Space & Soul deberias de agregar otro item despues de Space & Soul
Código:
<li>
   <a  href='http://www.idispaces.com/es//path-to-html-file.html' >Earth & Flesh</a>
</li>
Debería de quedar así:
Código:
<div style='padding:0px 5px 0px 5px;'>Colecciones
   <ul>
      <li>
         <a  href='http://www.idispaces.com/es//space-amp-soul-437.html' >Space & Soul</a>
      </li>
      <li>
         <a  href='http://www.idispaces.com/es//path-to-html-file.html' >Earth & Flesh</a>
      </li>
   </ul>
</div>
Se entiende?

Salu2.
__________________
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."

Última edición por [NiRVaNa]; 25/03/2011 a las 08:21 Razón: Desacomodación de codigo! xD
  #9 (permalink)  
Antiguo 25/03/2011, 15:38
 
Fecha de Ingreso: febrero-2011
Mensajes: 175
Antigüedad: 6 años, 10 meses
Puntos: 1
Respuesta: Menu desplegable

Esto es una explicación con dos pares de pelotas.

muchas gracias

Etiquetas: desplegable
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 1 personas




La zona horaria es GMT -6. Ahora son las 09:22.