Hola a todos:
He estado mirando maneras de hacer una web donde las secciones estuviesen colocadas en horizontal y a través de un menú poder deslizarte por ellas...
Lo más aproximado que he encontrado es wslide junto jquery, aunque mi idea es que se vena todas las secciones y la que se seleccione quede en medio (en este caso quedan ocultas y tan solo se ve la seleccionada)
Ejemplo 2 http://www.webinventif.fr/wp-content...lide/index.htm
Aún así no comprendo como funciona... Tengo esto:
CSS Código HTML:
<style type="text/css" media="screen">
#parent2-wrap{
border: 1px solid gray;
}
#parent2 li{
background: #F2F2F2;
padding: 15px;
margin: 5px;
}
#parent2-menu a.wactive{
font-weight: bold;
}
</style>
JAVASCRIPT Código HTML:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.wslide.js"></script>
<script type="text/javascript" charset="utf-8">
$('#parent2').wslide({
width: 250,
height: 250,
pos: 4,
horiz: true
});
</script> HTML MENU Código HTML:
<div id="menu">
<ul id="parent2-menu" class="wslide-menu">
<li><a href="#parent2-1">Sección1</a></li>
<li><a href="#parent2-2">Sección2</a></li>
<li><a href="#parent2-3">Sección3</a></li>
</ul>
</div>
HTML SECCIONES
Código HTML:
<div id="parent2-wrap" class="wslide-wrap" style="margin: 0pt; padding: 0pt; overflow: hidden; position: relative; text-align: left; height: 250px; width: 250px;">
<ul id="parent2" style="margin: 0pt; padding: 0pt; position: absolute; width: 2250px; height: 250px; top: -6px; left: -786px;">
<li id="parent2-1" style="overflow: hidden; display: block; float: left; height: 220px; width: 220px;;" rel="526:6">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</li>
<li id="parent2-2" style="overflow: hidden; display: block; float: left; height: 220px; width: 220px;" rel="786:6">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</li>
<li id="parent2-3" style="overflow: hidden; display: block; float: left; height: 220px; width: 220px;" rel="1046:6">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</li>
</ul>
</div>
Alguien me podría ayudar?
Muchas gracias!