¿Como hacer algo como esto?

dhincapier · #1 (**permalink**) 26/10/2010, 15:54

Hola quisiera saber como se hace algo como lo que hay en la pagina megaupload.

En la parte inferior de sus webs se ve un anuncio en donde el usuario decide si cerrarlo o no quisiera que me orientaran acerca de como realizar un anuncio como este gracias

por si quieren mirar
http://www.megaupload.com/?d=I9B3ZPOL

chichote · #2 (**permalink**) 27/10/2010, 13:11

aqui tienes un ejemplo muy basico con jquery http://www.webintenta.com/Files/JQueryCollapse.html

saludos.

briandnunez · #3 (**permalink**) 27/10/2010, 14:59

si se posteara el codigo y la manera de insertarlo sería de mucha ayuda. De todas maneras pr lo menos ya sè que es jquery, del cual no se mucho (por no decir nada).
Saludos

chichote · #4 (**permalink**) 28/10/2010, 07:09

Si miras el codigo fuente esta todo lo que neceistas saber, es realmente muy sencillo

de todos modos lo expongo aca:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Collapse</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function()
{
 
$("#mostrar").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});
 
$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});
});
</script>
<style type="text/css">
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666; 
}
a{color:#993300; text-decoration:none;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #FADDA9;
background-color:#FDF4E1;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
</style>
</head>
<body>
<a href="#" id="mostrar">MOSTRAR</a>
 
<div id="caja">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</body>
</html>

saludos.