Efecto menu css

#1 (**permalink**) 10/05/2017, 11:31

Hola, quisera lograr este efecto del menu:

http://es.wix.com/website-template/v...leryDocIndex=5

Se puede con css? si es así un encaminamiento de como proceder? no pido codigo sino ideas

Edito:

Lo que tengo pensado es:

1.darle visibilidad none a los contenedores
2.darle un margin que le de un offset a los contenedores
3.darle float right y position absolute para que se superpongan
4.aplicar una transicion acompañado de un nth-child para jugar con los contenedores

Pero en lo que topo es como gatillo la transicion(es) al hacer click a los enlaces y como hacer para que que el cambio quede estático para el contenedor afectado.

Saludos, gracias

#2 (**permalink**) 11/05/2017, 21:12

Quiero agregar que algo me he acercado:

Código HTML:

Ver original<!doctype html>
 
<html>
<head>
<style>
 
*{
padding:0px;
margin:0px;
}
 
.original{
background-color:red;
width:350px;
margin-left: 500px;
transition: margin-left 0.3s;
}
 
.changer:focus ~ .original{
margin-left:0px;
}
</style>
 
</head>
 
<body>
 
<a href="#" class="changer">Te cambio</a>
<br/><br/>
<div class="original">Cambiame!!</div>
 
</body>
</html>

El problema es que cuando pierde el foco, al hacer click en otra parte de la web pierde el foco y se dispara nuevamente el focus. Ideas?

ArturoGallegos · #3 (**permalink**) 11/05/2017, 22:54

Creo que lo que buscas es este efecto

https://jsfiddle.net/arturogallegos/4cq71zkv/

#4 (**permalink**) 13/05/2017, 14:10

Buenisimo, funciona, una cosa lo necesito con display y no con overflow, si hago ese cambio no se ve la transicion de margin-left, que puede ser?

#5 (**permalink**) 13/05/2017, 14:40

Buenisimo funciona, una consulta es que al hacer click claramente se va cargando el enlace #id, y el problema está en que el boton atras va carga con estos, solución para ello?

Disculpa por lo persistene

Muchas gracias!!

ArturoGallegos · #6 (**permalink**) 15/05/2017, 19:59

Es triste ver que aun no hayas regresado con la respuesta a tus preguntas, y aun mas triste ver que cuando pensé ayudarte lo has tomado a que te voy a dar la solución completa.

Compañero @alvaro_trewhela te exhorto a que uses tu navegador y busques información o documentación sobre cada una de las propiedades involucradas., se entusiasta y aprende de tus errores y aprende porque te gusta.

Si bien se la respuesta, a mi me tomo tiempo investigar y aprender como para regalarte mi trabajo sin ver que tu te esfuerces en investigar y aprender.
Mi aporte a tu causa es el código antes expuesto, tómalo a bien y que tengas éxito en tu aprendizaje.

#7 (**permalink**) 15/05/2017, 20:52

Si disculpa es que no soy muy expresivo.

Tomé el código y lo interioricé, creo haber entenido completamente la mecánica. he aprenido mucho sobre selectores de css.

Dí vueltas y vueltas y no llegue a nada, pense que pudiese ser algo más sencillo pero por lo que veo no lo es, por eso pido ayuda.

Bueno te doy las gracias por tu tiempo y por tu respuesta, me sirvió mucho, ha seguir aprendiendo e investigando.

Gracias.