URGENTE: Menu Desplegable.

canino_latino · #1 (**permalink**) 15/06/2010, 12:04

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head> 
<style>
#Menu {
    position: absolute;
    width: 1002px;
    height: 40px;
    list-style:none;
    left: 100px;
    }
#Television a{
    background-image:url('img/menu.png');
    display: block;
    float: left; 
    width: 175px;
    height: 40px;
    }
#Deportes a{
    background-image:url('img/menu.png');
    background-position: -178px 0px;
    display: block;
    float: left; 
    width: 105px;
    height: 40px;
    }
#Infantiles a{
    background-image:url('img/menu.png');
    background-position: -283px 0px;
    display: block;
    float: left; 
    width: 199px;
    height: 40px;
    }
#Variados a{
    background-image:url('img/menu.png');
    background-position: -482px 0px;
    display: block;
    float: left; 
    width: 100px;
    height: 40px;
    }
#Peliculas a{
    background-image:url('img/menu.png');
    background-position: -582px 0px;
    display: block;
    float: left; 
    width: 95px;
    height: 40px;
    }
#Series a{
    background-image:url('img/menu.png');
    background-position: -677px 0px;
    display: block;
    float: left; 
    width: 153px;
    height: 40px;
    }
#Emisoras a{
    background-image:url('img/menu.png');
    background-position: -830px 0px;
    display: block;
    float: left; 
    width: 172px;
    height: 40px;
    }
#Television a:hover{
    background-image:url('img/menu.png');
    background-position: 0px -41.5px;
    display: block;
    float: left; 
    width: 175px;
    height: 40px;
    }
#Deportes a:hover{
    background-image:url('img/menu.png');
    background-position: -178px -41.5px;
    display: block;
    float: left; 
    width: 105px;
    height: 40px;
    }
#Infantiles a:hover{
    background-image:url('img/menu.png');
    background-position: -283px -41.5px;
    display: block;
    float: left; 
    width: 199px;
    height: 40px;
    }
#Variados a:hover{
    background-image:url('img/menu.png');
    background-position: -482px -41.5px;
    display: block;
    float: left; 
    width: 100px;
    height: 40px;
    }
#Peliculas a:hover{
    background-image:url('img/menu.png');
    background-position: -582px -41.5px;
    display: block;
    float: left; 
    width: 95px;
    height: 40px;
    }
#Series a:hover{
    background-image:url('img/menu.png');
    background-position: -677px -41.5px;
    display: block;
    float: left; 
    width: 153px;
    height: 40px;
    }
#Emisoras a:hover{
    background-image:url('img/menu.png');
    background-position: -830px -41.5px;
    display: block;
    float: left; 
    width: 172px;
    height: 40px;
    }
</style>
</head>
<body>
<div id="Menu">
<div id="Television"><a href=""></a></div>
<div id="Deportes"><a href=""></a></div>
<div id="Infantiles"><a href=""></a></div>
<div id="Variados"><a href=""></a></div>
<div id="Peliculas"><a href=""></a></div>
<div id="Series"><a href=""></a></div>
<div id="Emisoras"><a href=""></a></div></div>
<div id="Contenido">Contenido del DIV que se abre</div>
</body>
</html>

Espero puedan ayudarme,

Gracias,

Hasta pronto.

pcexpansion · #2 (**permalink**) 15/06/2010, 12:17

cómo te manejas con ajax? Si usas Prototype, es lo más fácil

Carlangueitor · #3 (**permalink**) 15/06/2010, 12:22

¿Qué tiene de Urgente?

Agrega esto en tu CSS:

Código CSS:

Ver original#Contenido {
display: none;
}
#Deportes:hover #Conetnido {
display:block !important;
position: absolute;
top: 50px; /*Aquí pones tus posiciones*/
left: 50&#37; ;
}

Y modifica tu HTML así:

Código HTML:

Ver original<div id="Menu">
<div id="Television"><a href=""></a></div>
<div id="Deportes"><a href=""><div id="Contenido">Contenido del DIV que se abre</div></a></div>
<div id="Infantiles"><a href=""></a></div>
<div id="Variados"><a href=""></a></div>
<div id="Peliculas"><a href=""></a></div>
<div id="Series"><a href=""></a></div>
<div id="Emisoras"><a href=""></a></div></div>

Saludos

canino_latino · #4 (**permalink**) 15/06/2010, 12:42

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

Carlangueitor · #5 (**permalink**) 15/06/2010, 12:51

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

alexk · #6 (**permalink**) 15/06/2010, 13:00

Cita:

Iniciado por Carlangueitor

¿Qué tiene de Urgente?

ami me sucede muy muy amenudo... cuando me ofresco de neurologo...

Carlangueitor · #7 (**permalink**) 15/06/2010, 13:18

A ver, se me ocurrió que lo puedes hacer con Javascript:

Código HTML:

Ver original<a href="#" onClick="getElementById('contenido').style.display = 'block';">Click </a>
    <div id="contenido" style="width:200px; height: 50px; background: #000; display: none;">
    </div>

Cita:

Iniciado por alexk

ami me sucede muy muy amenudo... cuando me ofresco de neurologo...

Saludos

canino_latino · #8 (**permalink**) 15/06/2010, 13:35

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.