Toggle Button Menu

toggle-button-menu

Jade:
header.header
	.button
		.button__item
		.button__item
		.button__item
		.button__item
	ul.menu
		li.menu__item
			a.menu__link(href="#") menu link
		li.menu__item
			a.menu__link(href="#") menu link
		li.menu__item
			a.menu__link(href="#") menu link
		li.menu__item
			a.menu__link(href="#") menu link

Stylus:
.header
	padding 50px 100px

.button
	size 40px
	cursor pointer
	&:hover .button__item
		opacity 1

	&__item
		width 100%
		height 5px
		background-color #fff
		opacity .8
		margin-bottom 5px
		transition all .2s
		&:last-child
			margin-bottom 0

.menu
	list-style-type none
	margin 0
	padding 0
	display none

	&__item
		display block

	&__link
		text-decoration none

jQuery:
$(function() {
	$('.button').click(function(){
		$('.menu').slideToggle();
	});
});