Foros del Web » Creando para Internet » CSS »

URGENTE: Menu Desplegable.

Estas en el tema de URGENTE: Menu Desplegable. en el foro de CSS en Foros del Web. Hola, Bueno amigos la verda de css tengo muy poco conocimiento, necesitaria saber lo siguiente: al pasar el mouse ejemplo por el enlace que contiene ...
  #1 (permalink)  
Antiguo 15/06/2010, 13:04
 
Fecha de Ingreso: enero-2010
Mensajes: 113
Antigüedad: 7 años, 10 meses
Puntos: 2
Exclamación URGENTE: Menu Desplegable.

Hola,

Bueno amigos la verda de css tengo muy poco conocimiento, necesitaria saber lo siguiente:

al pasar el mouse ejemplo por el enlace que contiene el div con id "Deportes" se abra el div de id "Contenido" no se si entiendan lo que les quiero decir.

aqui les dejo mi codigo:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
  2. <head>
  3. #Menu {
  4.     position: absolute;
  5.     width: 1002px;
  6.     height: 40px;
  7.     list-style:none;
  8.     left: 100px;
  9.     }
  10. #Television a{
  11.     background-image:url('img/menu.png');
  12.     display: block;
  13.     float: left;
  14.     width: 175px;
  15.     height: 40px;
  16.     }
  17. #Deportes a{
  18.     background-image:url('img/menu.png');
  19.     background-position: -178px 0px;
  20.     display: block;
  21.     float: left;
  22.     width: 105px;
  23.     height: 40px;
  24.     }
  25. #Infantiles a{
  26.     background-image:url('img/menu.png');
  27.     background-position: -283px 0px;
  28.     display: block;
  29.     float: left;
  30.     width: 199px;
  31.     height: 40px;
  32.     }
  33. #Variados a{
  34.     background-image:url('img/menu.png');
  35.     background-position: -482px 0px;
  36.     display: block;
  37.     float: left;
  38.     width: 100px;
  39.     height: 40px;
  40.     }
  41. #Peliculas a{
  42.     background-image:url('img/menu.png');
  43.     background-position: -582px 0px;
  44.     display: block;
  45.     float: left;
  46.     width: 95px;
  47.     height: 40px;
  48.     }
  49. #Series a{
  50.     background-image:url('img/menu.png');
  51.     background-position: -677px 0px;
  52.     display: block;
  53.     float: left;
  54.     width: 153px;
  55.     height: 40px;
  56.     }
  57. #Emisoras a{
  58.     background-image:url('img/menu.png');
  59.     background-position: -830px 0px;
  60.     display: block;
  61.     float: left;
  62.     width: 172px;
  63.     height: 40px;
  64.     }
  65. #Television a:hover{
  66.     background-image:url('img/menu.png');
  67.     background-position: 0px -41.5px;
  68.     display: block;
  69.     float: left;
  70.     width: 175px;
  71.     height: 40px;
  72.     }
  73. #Deportes a:hover{
  74.     background-image:url('img/menu.png');
  75.     background-position: -178px -41.5px;
  76.     display: block;
  77.     float: left;
  78.     width: 105px;
  79.     height: 40px;
  80.     }
  81. #Infantiles a:hover{
  82.     background-image:url('img/menu.png');
  83.     background-position: -283px -41.5px;
  84.     display: block;
  85.     float: left;
  86.     width: 199px;
  87.     height: 40px;
  88.     }
  89. #Variados a:hover{
  90.     background-image:url('img/menu.png');
  91.     background-position: -482px -41.5px;
  92.     display: block;
  93.     float: left;
  94.     width: 100px;
  95.     height: 40px;
  96.     }
  97. #Peliculas a:hover{
  98.     background-image:url('img/menu.png');
  99.     background-position: -582px -41.5px;
  100.     display: block;
  101.     float: left;
  102.     width: 95px;
  103.     height: 40px;
  104.     }
  105. #Series a:hover{
  106.     background-image:url('img/menu.png');
  107.     background-position: -677px -41.5px;
  108.     display: block;
  109.     float: left;
  110.     width: 153px;
  111.     height: 40px;
  112.     }
  113. #Emisoras a:hover{
  114.     background-image:url('img/menu.png');
  115.     background-position: -830px -41.5px;
  116.     display: block;
  117.     float: left;
  118.     width: 172px;
  119.     height: 40px;
  120.     }
  121. </head>
  122. <div id="Menu">
  123. <div id="Television"><a href=""></a></div>
  124. <div id="Deportes"><a href=""></a></div>
  125. <div id="Infantiles"><a href=""></a></div>
  126. <div id="Variados"><a href=""></a></div>
  127. <div id="Peliculas"><a href=""></a></div>
  128. <div id="Series"><a href=""></a></div>
  129. <div id="Emisoras"><a href=""></a></div></div>
  130. <div id="Contenido">Contenido del DIV que se abre</div>
  131. </body>
  132. </html>

Espero puedan ayudarme,

Gracias,

Hasta pronto.
  #2 (permalink)  
Antiguo 15/06/2010, 13:17
 
Fecha de Ingreso: mayo-2010
Mensajes: 84
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: URGENTE: Menu Desplegable.

cómo te manejas con ajax? Si usas Prototype, es lo más fácil
__________________
http://www.pcexpansion.es
  #3 (permalink)  
Antiguo 15/06/2010, 13:22
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: URGENTE: Menu Desplegable.

¿Qué tiene de Urgente?

Agrega esto en tu CSS:
Código CSS:
Ver original
  1. #Contenido {
  2. display: none;
  3. }
  4. #Deportes:hover #Conetnido {
  5. display:block !important;
  6. position: absolute;
  7. top: 50px; /*Aquí pones tus posiciones*/
  8. left: 50&#37; ;
  9. }
Y modifica tu HTML así:
Código HTML:
Ver original
  1. <div id="Menu">
  2. <div id="Television"><a href=""></a></div>
  3. <div id="Deportes"><a href=""><div id="Contenido">Contenido del DIV que se abre</div></a></div>
  4. <div id="Infantiles"><a href=""></a></div>
  5. <div id="Variados"><a href=""></a></div>
  6. <div id="Peliculas"><a href=""></a></div>
  7. <div id="Series"><a href=""></a></div>
  8. <div id="Emisoras"><a href=""></a></div></div>

Saludos
__________________
Grupo Telegram Docker en Español
  #4 (permalink)  
Antiguo 15/06/2010, 13:42
 
Fecha de Ingreso: enero-2010
Mensajes: 113
Antigüedad: 7 años, 10 meses
Puntos: 2
Respuesta: URGENTE: Menu Desplegable.

Bueno para mi es urgente porque necesito terminar

ahora tengo otra pregunta como hago para que cuando salga el div de id "Contenido" se quede y no se valla osea que la gente le pueda dar click a lo que sale en ese div
  #5 (permalink)  
Antiguo 15/06/2010, 13:51
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: URGENTE: Menu Desplegable.

Lo más fácil es hacer una página para cada sección. Si no quieres que se recargue toda la página puedes usar Frames (nada recomendable) o Ajax, aunque si es urgente no creo que te sirva.

Saludos
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 15/06/2010, 14:00
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: URGENTE: Menu Desplegable.

Cita:
Iniciado por Carlangueitor Ver Mensaje
¿Qué tiene de Urgente?
ami me sucede muy muy amenudo... cuando me ofresco de neurologo...
  #7 (permalink)  
Antiguo 15/06/2010, 14:18
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: URGENTE: Menu Desplegable.

A ver, se me ocurrió que lo puedes hacer con Javascript:
Código HTML:
Ver original
  1. <a href="#" onClick="getElementById('contenido').style.display = 'block';">Click </a>
  2.     <div id="contenido" style="width:200px; height: 50px; background: #000; display: none;">
  3.     </div>

Cita:
Iniciado por alexk Ver Mensaje
ami me sucede muy muy amenudo... cuando me ofresco de neurologo...


Saludos
__________________
Grupo Telegram Docker en Español
  #8 (permalink)  
Antiguo 15/06/2010, 14:35
 
Fecha de Ingreso: enero-2010
Mensajes: 113
Antigüedad: 7 años, 10 meses
Puntos: 2
Respuesta: URGENTE: Menu Desplegable.

Muchas gracias lo del javascript lo habia pensado pero no crei que funcionara por hay dicen que el peor mandado es el que no se hace :p.

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




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