-Hay un div llamado #contenedor que contiene todos los demás elementos de la web. Tiene además, un width y height de 100% ocupando así toda la página.
-Hay un menú lateral (#menuLateral) con float:left, width de 15% y height de 100%.
-El menú lateral contiene una <ul> con 5 "<li><a href=pagina.html>enlace</a></li>". He agrupado las <li> con una clase para aplicarle a todas el tamaño, color y comportamiento con la pseudoclase "hover" y eso me ha salido perfecta.
Ahora bien, lo que quiero es que al clicar en uno de los elementos del menú, la siguiente página entre deslizándose desde la derecha ocupando todo el espacio hasta llegar a tocar con el menú (Adjunto boceto cutrísimo para que se me entienda)
![](http://s1.postimg.org/s71swdhsr/web1.png)
![](http://s1.postimg.org/w4p2ls4m3/web2.png)
El código fuente del index es este:
<body>
<div id="contenedor">
<div id="menuLateral">
<ul>
<li id="celdaInsercion" class="bloques"><a href="insercion.html"> <p>Insertar</p></a></li>
<li id="celdaConsulta" class="bloques"><a href="consulta.html"><p>Consultar</p></a></li>
<li id="celdaActualizar" class="bloques"><a href="update.html"><p>Update</p></a></li>
<li id="celdaGrafico" class="bloques"><a href="grafico.html"><p>Obtener Gráfico</p></a></li>
<li id="celdaBorrado" class="bloques"><a href="borrado.html"><p>Borrado</p></a></li>
</ul>
</div>
</div>
</body>
He estado estudiando sobre selectores, transiciones y pseudoclases con css pero no consigo dar con la solución...Probablemente mi código html no sea del todo correcto y la duda sea una estupidez, pero yo soy sysadmin y programador, esta es la primera vez que me meto con diseño web...
![U_U](http://static.forosdelweb.com/fdwtheme/images/smilies/nods.png)
¡Un saludo y muchísimas gracias por adelantado!
PD: Nada de Javascript ni Jquery. Pretendo que sea CSS y Html puro.