Como Convertir logo en Dropdown

luisfer91 · #1 (**permalink**) 04/01/2013, 06:08

Hola, estoy intentando enlazar dos webs de una misma temática desde el logo, lo que quiero es que la gente cuando se acerce al logo se le abra un desplegable mostrandole los dos logos para acceder a la otra página si les interesa.

La idea seria hacerlo igual que en freelancer.com,
¿Como lo puedo hacer?
Gracias
Luis

IsaBelM · #2 (**permalink**) 04/01/2013, 06:15

es una capa que se muestra u oculta al posicionar el ratón en otro elemento. tienes dos maneras de hacer con javascript y los evento onmouseover y onmouseout o con css y la pseudo-clase :hover. ésta última es la que te interesa usar

chuekeron · #3 (**permalink**) 04/01/2013, 12:24

Si estas utilizando alguna librería jQuery, yo lo haría así:

<head>
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.top {
display: block;
float: left;
width: 500px;
height: 60px;
background-color: #CCCCCC;
position: relative;
}
.capa {
display: none;
float: left;
width: 200px;
height: 150px;
background-color: #333333;
position: absolute;
left: 0px;
top: 70px;
}
</style>
</head>

<body>
<div class="top">
<img src="img/logo.png" id="logo-1" />

<div class="capa">
<img src="img/logo2.png" class="logo" />
<img src="img/logo3.png" class="logo" />
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {

$('#logo-1').hover(function() {
$('.capa').fadeIn("normal");
}, function() {
$('.capa').fadeOut("normal");
});

});
</script>
</body>

Si no estas utilizando ninguna librería, podes hacerlo con javascript o estilos CSS.