basic hamburger menu

Assumption

• is for text only menu items.
• is without submenu feature.
• is built with pure CSS only without javascript.
• is not for use under frameworks e.g Wordpress.
• accepts only clicks, no hover interactions.
• tested for modern browsers only: Mozilla Firefox 71.0, Google Chrome 79.0, Microsoft Edge 44.1 and Opera 65.0

HTML structure

<div>
	<input id="ham-menu-toggle" type="checkbox">
	
	<label for="ham-menu-toggle">
		<span></span>
		<span></span>
		<span></span>
	</label>
	
	<ul>
		<li><a href="#">menu item #1</a></li>
		<li><a href="#">menu item #2</a></li>
		<li><a href="#">menu item #3</a></li>
		<li><a href="#">menu item #4</a></li>
		<li><a href="#">menu item #5</a></li>
		<li><a href="#">menu item #6</a></li>
		<li><a href="#">menu item #7</a></li>
	</ul>
</div><!-- end of ham-menu div -->
			

CSS

input#ham-menu-toggle{
	display: none;/*hide traditional input element and show below label instead.*/
}

label[for="ham-menu-toggle"]{
	display: inline-block;
	cursor: pointer;/*so user will know this is clickable*/
}

label[for="ham-menu-toggle"] span{
	display: block;
	margin-top: 0.2em;
	width: 2em;
	border-top: 0.2em solid black;
}
label[for="ham-menu-toggle"] span:first-child{
	margin-top: 0;
}

input#ham-menu-toggle~ul{
	display: none;
	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{
	display: block;/*make sure this would cover all menu items when menu is opened(expanded).*/
}

input#ham-menu-toggle~ul a{
	text-decoration: none;
	font-weight: bold;
	color: inherit;
}

next: menu with css transition

Comments

Your comment: Your Name: Your Web Presence: Submit