Dudas con efecto transition

DoctorZ · #1 (**permalink**) 11/11/2014, 11:51

¡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.

Alexis88 · #2 (**permalink**) 11/11/2014, 21:41

En CSS no existe el evento click, sin embargo, podrías obtener el resultado que deseas usando radio buttons ocultos y etiquetas en lugar de botones (a los cuales podrías darles esa apariencia con CSS). En la hoja de estilos, podrías indicar que, cuando uno de los radio button esté marcado, se desplace un bloque asociado a él, produciéndose el efecto que buscas.

Un ejemplo:

Código HTML:

Ver original<section>
    <input type = "radio" name = "boton" id = "a" checked />
    <label for = "a">Primero</label>
    <div class = "block">BLOQUE A</div>
</section>
    
<section>
    <input type = "radio" name = "boton" id = "b" />
    <label for = "b">Segundo</label>
    <div class = "block">BLOQUE B</div>
</section>

Código CSS:

Ver original.block{
    width: 100%;
    height: 35rem;
    margin-left: -100rem;
    position: absolute;
    transition: .75s;
}
 
[type=radio]{
    display: none;
}
 
[type=radio]:checked ~ .block{
    margin-left: 0;
}

Tenemos dos secciones, cada una contiene a un radio button con el mismo nombre pero con identificador distinto, una etiqueta que, al ser clickeada, activará al radio button cuyo identificador se especifica en el atributo for y una división. En la hoja de estilos, le doy dimensiones a las divisiones, así como una posición absoluta, además, las coloco varios píxeles hacia la izquierda para que no sean visibles y asigno una transición de 0.75 segundos para darle un efecto de deslizamiento suave. Oculto a los radio button y, cuando marque a alguno de ellos, desplazo a la división que se encuentre a continuación hasta el margen izquierda de la ventana, haciéndose así visible.

DEMO y CÓDIGO

Saludos