Cloud menu

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

Cloud menu

Cloud menu con animación en dos capas con 6 elementos con modal. Realizado solo con CSS3.

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

HTML:

Primera capa: dentro de la class ".menu", tenemos un input type checkbox.

Segunda capa: Todos los elementos del menú, en este caso seis, se muestran con "transition-delay" y dan paso a una modal con diferentes opciones. Clone, change name, download, delete, etc.

CSS de la nube:

	/*cloud*/
	.cloud {
	  width: 250px;
	  height: 90px;
	  border-radius: 100px;
	  -webkit-border-radius: 100px;
	  -moz-border-radius: 100px;
	  position: relative;
	  margin: -41px 266px 70px -130px;
	  cursor: pointer;
	  z-index: 9;
	  -webkit-transition: all .8s ease-out;
	  -moz-transition: all .8s ease-out;
	  -o-transition: all .8s ease-out;
	  -ms-transition: all .8s ease-out;
	}

	.cloud:after, .cloud:before {
	  content: ';
	  position: absolute;
	  background: #2ecc71;
	}

	.cloud:after{
	  width: 100px;
	  height: 100px;
	  top: -50px;
	  left: 40px;
	  border-radius: 100px;
	  -webkit-border-radius: 100px;
	  -moz-border-radius: 100px;
	  background-color: grey;
	}

	.cloud:before{
	  width: 120px; 
	  height: 120px;
	  top: -65px;
	  right: 30px;
	  border-radius: 200px;
	  -webkit-border-radius: 200px;
	  -moz-border-radius: 200px;
	}

	.cloudTwo, .cloudTwo:after, .cloudTwo:before {
	  background: #2ecc71;
	}

CSS de la class ".tab" y de dos de los elementos al ser mostrados:

	/*.tab*/
	.toggle ~ .tab {
	    position: absolute;
	    color: rgba(0,0,0,.5);
	    width: 120px;
	    height: 120px;
	    left: 0px;
	    top: 0px;
	    transform: translate(-50%, -50%) scale(0);
	    transition: all 0.3s;
	    opacity: 0;
	    background-color: #fff;
	    border-radius: 14px;
	    border: 2px solid #2ecc71;
	    margin-bottom: 44px;
	    -webkit-transition: all .4s ease-out;
	    -moz-transition: all .4s ease-out;
	    -o-transition: all .4s ease-out;
	    -ms-transition: all .4s ease-out;
	}

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

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

Puedes ver el código completo y descargarlo en mi perfil de Codepen

Un ejemplo similar puedes verlo en un post anterior Menú circular

Mariano J

Escribe un comentario

Tu email no se hará visible