¡Buenas tardes a todos! Estoy haciendo una pequeña y simple web compuesta por una serie de páginas con algunos formularios y demás. He conseguido una interfaz simple e intuitiva para operaciones sobre una base de datos y ahora quiero añadirle unas animaciones. Para la parte del backend (php) no tengo problemas. El problema está en que quiero conseguir un efecto de transición con css. La idea es la siguiente:
-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)
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...
¡Un saludo y muchísimas gracias por adelantado!
PD: Nada de Javascript ni Jquery. Pretendo que sea CSS y Html puro.