Animated CSS menu hamburger that I use all the time... finally made it into a reusable less mixin.

hamburger.less

.hamburger(
	@size: 40px, 
	@line: 2px,
	@spacing: 20%,
	@duration: .4s,
	@parentclass: hamburger-is-active,
	@color: currentColor
) {
	@halfduration: @duration / 2;
	@halfsize: @size / 2;
	@halfline: @line / 2;
	
	box-sizing: border-box;
	position: relative;
	width: @size;
	height: @size;
	padding: 0;
	border: 0;
	line-height: 0;
	outline: 0;
	cursor: pointer;
	background: transparent;
	color: @color;
	
	&:before, &:after, span {
		position: absolute;
		content: '';
		display: block;
		box-sizing: border-box;
		background: currentColor;
		height: @line;
		width: 100%;
		transition-duration: @halfduration, @halfduration;
		transition-delay: @halfduration, 0s;
	}
	
	&:before {
		top: @spacing;
		transition-property: top, transform;
	}
	
	&:after {
		bottom: @spacing;
		transition-property: bottom, transform;
	}
	
	span {
		background: currentColor;
		overflow: hidden;
		top: @halfsize - @halfline;
		transition: background 0s @halfduration;
		text-indent: 100%;
	}
	
	&.is-active, .@{parentclass} & {
		&:before, &:after {
			transition-delay: 0s, @halfduration;
		}

		&:before {
			top: @halfsize - @halfline;
			transform: rotate(45deg);
		}

		&:after {
			bottom: @halfsize - @halfline;
			transform: rotate(-45deg);
		}
		
		span {
			background: transparent;
		}
	}
}