Menú circular

Menú circular / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Menú circular

Menú circular con animación en dos capas con 6 elementos. Realizado solo con CSS3.

See the Pen Circular menu by Mariano J. (@didac) on CodePen.

HTML:

Primera capa: dentro de la class “menu”, tenemos un input type checkbox, y en el label ponemos el icono o texto que deseamos.

Segunda capa: Todos los “href” del menú, en este caso seis enlaces, se muestran con "transition-delay".

CSS:

	/*CSS input & label*/
	.toggle + .style {
	  width: 190px;
	  height: 190px;
	  border-radius: 50%;
	  cursor: pointer;
	  transform: translate(-50%, -50%) scale(1);
	  z-index: 5;
	  display: block;
	  max-width: 200px;
	  margin-bottom: 0;
	  background: #ff0000;
	  color: #fff;
	  font-size: 2.5i;
	  padding-top: 65px;
	  text-align: center;
	}

	.toggle:checked ~ .tab {
	  opacity: 1;
	  transform: translate(-50%, -50%) scale(1);
	}

	/*CSS first two menu items*/
	.menu > .toggle:checked ~ .tab:nth-of-type(1) {
	  top: -97px;
	  left: 0px;
	  transition-delay: 0s;
	}

	.menu > .toggle:checked ~ .tab:nth-of-type(2) {
	  top: -45px;
	  left: 88px;
	  transition-delay: 0.125s;
	}

Puedes ver el código completo y decargar este menú en mi perfil de codepen.

Mariano J.

Ya sabes que soy fan de tu perfil en Codepen, espero que sigas subiendo cosas.

Elena Jiménez / 30-05-2017

Hola Elena, esta semana subire algo nuevo, poco espectacular, pero muy práctico. Un saludo.

Mariano J. / 30-05-2017

Escribe un comentario

Tu email no se hará visible