basic hamburger menu 2: with css transition

jan 7 2020, 11:30pm

I've pushed menu toggle to right corner of page as that is the usual, common place we find hamburger menu icon on web.

And instead of manipulating CSS display property to hide / show menu, we'll use CSS max-width

input#ham-menu-toggle~ul{
	max-height: 0;
	transition: 1s max-height;
	list-style: none;
	margin: 0;
	padding-left: 0;
	overflow: hidden;
	line-height: 2em;
	border-bottom: 0.2em solid black;
}
input#ham-menu-toggle:checked~ul{
	max-height: 20em;/*make sure this would cover all menu items when menu is opened(expanded).*/
}

next: hide toggle on wide screen

Comments