¿Tienes dispositivo android? si es asi, debes saber que en la parte de arriba tiene una barra que cuando la arrastras hacia abajo te salen las notificaciones, bueno les he traido algo muy pero muy parecido.
es una barra que cuando haces click baja y muestra la informacion que quieras colocar, y cuando le vuelves a hacer click y sube y sin alterar el contenido de tu sitio..
bueno vamos al cod..
primero q importante, tener activado el extra del <head>
y coloquen el siguiente codigo.
Cita:
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$(".contenido").hide();
$("body").css("margin-top", $(".button").height());
$("#Top_Menu_Slide").css("height", 0 + $(".button").height());
$(".button").click(function(){
if($("#Top_Menu_Slide").height() == $(".button").height()){
$("#Top_Menu_Slide").animate({height: "100%"}, "slow");
$(".contenido").slideDown("slow");
$(this).html("Clic aqui, para ver mas contenido");
}else{
$("#Top_Menu_Slide").animate({height: $(".button").height()}, "slow");
$(".contenido").slideUp();
$(this).html("Clic aqui, para ocultar el contenido");
}
});
});
</script>
segundo, colocar el codigo de la barra en tu html
Cita:
<section id="Top_Menu_Slide">
<div>
<div class="contenido">
<h2>Info title</h2>
<p>Description title</p>
</div>
<div class="button">Clic aqui, para ver mas contenido</div>
</div>
</section>
y sin olvidar el codigo CSS, el css es libre de edicion y no afecta, siempre y cuando no cambien los selectores y no editen las propiedades width, height, top, bottom y position, a menos que sepas lo que haces.
Cita:
#Top_Menu_Slide{
width: 100%;
height: 100%;
background: #111;
position: fixed;
top: 0;
}
#Top_Menu_Slide > div{
color: #FFF;
width: 100%;
height: 100%;
}
.contenido > p{
font-size: 40px;
}
.contenido > h2{
font-size: 60px;
}
.contenido > p, .contenido > h2{
padding: 30px;
}
#Top_Menu_Slide > div > .button{
position: absolute;
background: #999;
bottom: 0;
width: 100%;
height: 30px;
line-height: 30px;
color: #111;
cursor: pointer;
}
CUALQUIER COSA, SE PONEN EN CONTACTO CONMIGO POR SI LES FALLA..
Y SI TIENEN UNA IDEA QUE QUIERAN CODEAR EN JQUERY AVISENME Y PODEMOS HACER NEGOCIO  NO SE ASUSTEN POR QUE MI WEB AUN NO TIENE CONTENIDO POR SI LA LLEGAN A VISITAR, ESTARE ACTIVO EN PWG
Ultima edición por paginandola el Dom Oct 05, 2014 2:44 am; editado 2 veces
|
NO SE ASUSTEN POR QUE MI WEB AUN NO TIENE CONTENIDO POR SI LA LLEGAN A VISITAR, ESTARE ACTIVO EN PWG
lo probé en firefox y funciona tal cual con sus efectos (no lo probé en los demás navegadores).