Menú hamburguesa, animación de un archivo svg con css
Este post se publicó hace más de dos años, es posible que la información publicada esté obsoleta o las referencias no existan.
La tecnica consiste en colocar tres lineas en el centro del svg, las tres lineas que formar el menú hambuguesa.
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
<path id="top" fill="none" stroke="#979797" stroke-linecap="square" stroke-width="30" d="M9.99812655,150 L292.015957,150"/>
<path id="middle" fill="none" stroke="#979797" stroke-linecap="square" stroke-width="30" d="M9.99812655,150 L292.015957,150"/>
<path id="bottom" fill="none" stroke="#979797" stroke-linecap="square" stroke-width="30" d="M9.99812655,150 L292.015957,150"/>
</svg>Cada una de las lineas tiene un id con el que las posicionaremos una encima de otra mediante css. Como están colocadas en el centro del svg, solo tenemos que posicionar la superior y la inferior.
#top{
transform: translateY(-80px);
}
#bottom{
transform: translateY(80px);
}Entonces al añadir una clase al hacer click, mediante javascript, cambiaremos el posicionamiento de las lineas superior e inferior y haremos desaparecer la linea del centro.
He dejado una demo y el resto del código en codepen.