jQuery pageSlide nos permite separar el contenido principal (el contenido en el cual queremos la atención del usuario) del contenido secundario que por defecto quedará oculto y a través de alguna acción (clic) podremos mostrarlo de manera animada (slide), para ocultarlo bastará hacer clic en el contenido principal.
Cómo usarlo
Primero crea una página html que servirá de contenido secundario y guardalo con el nombre de contenido_secundario.html
Crea otra página html con el nombre index.html incluyendo la libreria jQuery y pageSlide, así como algunos estilos y contenido, cómo se muestra a continuación:
<html>
<head>
<title>jQuery pageSlide plugin</title>
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.pageslide-0.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').pageSlide({
width: "350px"
});
});
</script>
<style type="text/css">
#pageslide-body-wrap {
position: relative;
}
#pageslide-slide-wrap {
position: fixed;
width: 0;
top: 0;
right: 0;
height: 100%;
background-color: #000;
}
#pageslide-content h2 {
color: #C60;
}
#pageslide-content p{
color:#fff;
}
</style>
</head>
<body>
<div id="content">
<a href="contenido_secundario.html" rel="pageslide">click for pageSlide</a>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</body>
</html>
Copia y pega el código de ejemplo y pruébalo. Realmente muy práctico.
Necesito saber cómo habilitar la página secundaria para hacer scroll. Muchas gracias por adelantado.
Hola, se puede conseguir el código del slide de esta página? El que tiene fondo celeste azulado arriba.
Muy buena información. Muchas Gracias.
Saludos.
Sergio.