9 hamburguer button

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

9 hamburguer button

Los botones "hamburguesa" (hamburguer button), son usados principalmente para los menús desplegables, sea en vista responsive o no.

Es algo sencillo y podemos valorar alternativas al movimiento en X habitual.

Con jQuery y toggleClass on click, se añade o se quita la class "on" a cada elemento. Con CSS3 y con "transform", se modifica la posición original de cada div.

See the Pen 9 hamburguer button menu by Mariano J. (@didac) on CodePen.

Son 9 ejemplos, de los cuales vamos a destacar tres.

jQuery, toggleClass evento onClick a class ".on4, .on5 y .on9":

	//button four
  	$(".btn4").click(function() {
    	$(this).toggleClass("on4");
  	});

  	//button five
  	$(".btn5").click(function() {
    	$(this).toggleClass("on5");
  	});

  	//button nine
  	$(".btn9").click(function() {
    	$(this).toggleClass("on9");
  	});

El CSS3 class ".on4, .on5 y .on9":

	/*button 4*/

	.btn4.on4 .hamburguer-bt__stripe__top {
	  margin-top: 20px;
	}

	.btn4.on4 .hamburguer-bt__stripe__middle {
	  margin-top: -14px;
	}

	.btn4.on4 .hamburguer-bt__stripe__bottom {
	  margin-top: -14px;
	}

	/*button 5*/

	.btn5.on5 .hamburguer-bt__stripe__top, .btn5.on5 .hamburguer-bt__stripe__bottom {
	  opacity: 0;
	}

	.btn5.on5 .hamburguer-bt__stripe__middle {
	  border-radius: 50%;
	  width: 33%;
	  height: 19px;
	}

	/*button 9*/

	.btn9.on9 .hamburguer-bt__stripe__top, .btn9.on9 .hamburguer-bt__stripe__bottom {
	  opacity: 0;
	}

	.btn9.on9 .hamburguer-bt__stripe__middle{
	  background-color: transparent;
	}

	.btn9.on9 .hamburguer-bt__stripe__middle:before {
	  content: "GO!";
	  position: absolute;
	  margin: -17px 0 0 -36px;
	  color: #E3E3E3;
	  font-weight: 700;
	  text-align: center;
	  letter-spacing: 2px;
	  font-size: 1.5em;
	  border: 2px solid;
	  padding: 8px;
	  border-radius: 4px;
	}

Puedes ver este ejemplo en mi perfil de Codepen

Mariano J.

Escribe un comentario

Tu email no se hará visible