CSS Only Expanding Menu

See the Pen CSS Only Expanding Menu by Genger Pacomio Mangubat (@Gellish) on CodePen.

Pug

input(type="checkbox" id="hamburger" name="hamburger")
label(for="hamburger")
.menu-container
	.menu
	.links
		a(href="") Home
		a(href="") About
		a(href="") Another
		a(href="") Link
.content
	h1.header CSS Only Expanding Menu
	
	p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quisquam sit natus magni qui nemo rerum alias sunt. Nostrum incidunt officiis, vero officia laudantium assumenda voluptatibus magni unde libero reprehenderit.
	
	h1 Wowza
	
	p  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloremque quidem ipsum officiis in, laboriosam soluta optio dolores nihil est, debitis beatae dolorum atque eos eum? Veniam beatae mollitia distinctio.

SCSS

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.menu-container {
	position: absolute;
	width:5rem;
	height: 5rem;
	overflow: hidden;
	left:0;
	top: 0;
	transition-delay: .3s;
}

.menu {
	position: relative;
	width: 10rem;
	height: 10rem;
	background-color: #1c7cd6;
	border-radius: 100%;
	transform: translate(-50%, -50%);
	transition: all .3s;
}

#hamburger {
	display: none;
}

label {
	position: absolute;
	width: 10rem;
	height: 10rem;
	border-radius: 100%;
	transform: translate(-50%, -50%);
	z-index: 2;
	cursor: pointer;
	tap-highlight-color:transparent;
	
	&:before {
  content: "";
  position: absolute;
  top: 65%;
		left: 65%;
  width: 1em;
  height: 0.15em;
  background: white;
  box-shadow: 
    0 0.25em 0 0 white,
    0 0.5em 0 0 white;
		transform: scale(2);
}
}

#hamburger:checked ~ .menu-container {
	width: 30vw;
	height: 100vh;
	transition-delay: 0s;
}

#hamburger:checked ~ .menu-container .menu {
	width: 250vh;
	height: 250vh;
	transition: all .3s;
}

.menu-container .links {
	position: absolute;
	left: 15vw;
	top: 50vh;
	z-index: 3;
	transform: translate(-50%, -50%);
	text-align: center;
	a {
		display: block;
		color: white;
		font-size: 2rem;
		text-decoration: none;
		margin: 3rem;
	}
}

.content {
	padding: 3rem 10rem;
	transition: all .2s;
	transition-delay: .1s;
	
	h1 {
		font-size: 2rem;
		color: #212529;
	}
	
	h1:not(.header) {
		margin-top: 4rem;
	}
	
	p {
		margin-top: 2rem;
		color: #495057;
	}
}

#hamburger:checked ~ .content {
	padding-left: 35vw;
	transition: all .2s;
	transition-delay: 0s;
}

No comments

Leave a comment