Mobile menu with scroll effects
Tags: css, html, showdev, webdev
Published: 2020-10-19 08:11:10

**CSS is not only used to provide a basic style for a web page** to make it look more attractive. There are plenty of other things that one can do with CSS as well. With the ability to create animations and interactions, CSS along with HTML allows web developers the opportunity to play around and experiment with different methods.

I want to show you a cool mobile menu with scroll effects, obviously you can modify and optimize the code, this is just a raw example.

Let's jump to the code.

```css
*  {
	box-sizing:  border-box;
}
html,
body  {
	margin:  0;
}
body  {
	font-family:  sans-serif;
	background-color:  #5E8066;
}
a  {
	text-decoration:  none;
}
.container  {
	position:  relative;
	margin:  35px  auto  0;
	width:  300px;
	height:  403px;
	background-color:  #483634;
	overflow:  hidden;
}
#toggle  {
	display:  none;
}
#toggle:checked~.toggle-container  .button-toggle  {
	box-shadow:  0  0  0  550px  rgba(0,  0,  0,  0.1),  inset  0  0  0  20px  rgba(0,  0,  0,  0.1);
}
#toggle:checked~.toggle-container  .button-toggle:before  {
	transform:  translateY(-50%)  rotate(45deg)  scale(1);
}
#toggle:checked~.toggle-container  .button-toggle:after  {
	transform:  translateY(-50%)  rotate(-45deg)  scale(1);
}
#toggle:checked~.nav  {
	margin-bottom:  100px;
	pointer-events:  auto;
	transform:  translate(50px,  50px);
}
#toggle:checked~.nav  .nav-item  {
	color:  #e2eb54;
	letter-spacing:  0;
	height:  40px;
	line-height:  40px;
	margin-top:  0;
	opacity:  1;
	transform:  scaleY(1);
	transition:  0.5s, opacity 0.1s;
}
#toggle:checked~.nav  .nav-item:nth-child(1)  {
	transition-delay:  0.15s;
}
#toggle:checked~.nav  .nav-item:nth-child(1):before  {
	transition-delay:  0.15s;
}
#toggle:checked~.nav  .nav-item:nth-child(2)  {
	transition-delay:  0.1s;
}
#toggle:checked~.nav  .nav-item:nth-child(2):before  {
	transition-delay:  0.1s;
}
#toggle:checked~.nav  .nav-item:nth-child(3)  {
	transition-delay:  0.05s;
}
#toggle:checked~.nav  .nav-item:nth-child(3):before  {
	transition-delay:  0.05s;
}
#toggle:checked~.nav  .nav-item:nth-child(4)  {
	transition-delay:  0s;
}
#toggle:checked~.nav  .nav-item:nth-child(4):before  {
	transition-delay:  0s;
}
#toggle:checked~.nav  .nav-item:before  {
	opacity:  0;
}
#toggle:checked~.content  {
	padding-top:  30px;
}
#toggle:checked~.content:before  {
	background-color:  rgba(0,  0,  0,  0.3);
}
.button-toggle  {
	position:  absolute;
	display:  inline-block;
	width:  20px;
	height:  20px;
	margin:  25px;
	background-color:  transparent;
	border:  none;
	cursor:  pointer;
	border-radius:  100%;
	transition:  0.6s;
}
.button-toggle:hover  {
	box-shadow:  0  0  0  8px  rgba(0,  0,  0,  0.1),  inset  0  0  0  20px  rgba(0,  0,  0,  0.1);
}
.button-toggle:before,
.button-toggle:after  {
	position:  absolute;
	content:  '';
	top:  50%;
	left:  0;
	width:  100%;
	height:  2px;
	background-color:  #e2eb54;
	border-radius:  5px;
	transition:  0.5s;
}
.button-toggle:before  {
	transform:  translateY(-50%)  rotate(45deg)  scale(0);
}
.button-toggle:after  {
	transform:  translateY(50%)  rotate(-45deg)  scale(0);
}
.nav  {
	display:  inline-block;
	margin:  25px  25px  20px;
	pointer-events:  none;
	transition:  0.5s;
} 
.nav-item  {
	position:  relative;
	display:  inline-block;
	float:  left;
	clear:  both;
	color:  transparent;
	font-size:  14px;
	letter-spacing:  -6.2px;
	height:  7px;
	line-height:  7px;
	text-transform:  uppercase;
	white-space:  nowrap;
	transform:  scaleY(0.2);
	transition:  0.5s, opacity 1s;
}
.nav-item:nth-child(1)  {
	transition-delay:  0s;
}
.nav-item:nth-child(1):before  {
	transition-delay:  0s;
}
.nav-item:nth-child(2)  {
	transition-delay:  0.05s;
}
.nav-item:nth-child(2):before  {
	transition-delay:  0.05s;
}
.nav-item:nth-child(3)  {
	transition-delay:  0.1s;
}
.nav-item:nth-child(3):before  {
	transition-delay:  0.1s;
}
.nav-item:nth-child(4)  {
	transition-delay:  0.15s;
}
.nav-item:nth-child(4):before  {
	transition-delay:  0.15s;
}
.nav-item:nth-child(1)  {
	letter-spacing:  -8px;
}
.nav-item:nth-child(2)  {
	letter-spacing:  -7px;
}
.nav-item:nth-child(n + 4)  {
	letter-spacing:  -8px;
	margin-top:  -7px;
	opacity:  0;
}
.nav-item:before  {
	position:  absolute;
	content:  '';
	top:  50%;
	left:  0;
	width:  100%;
	height:  2px;
	background-color:  #6EC4A3;
	transform:  translateY(-50%)  scaleY(5);
	transition:  0.5s;
}
.content  {
	position:  relative;
	text-align:  center;
	transition:  0.5s;
}
.content:before  {
	position:  absolute;
	content:  '';
	top:  0;
	left:  0;
	width:  100%;
	height:  100%;
	background-color:  transparent;
	z-index:  2;
	transition:  0.5s;
}
.circle  {
	display:  inline-block;
	width:  75px;
	height:  75px;
	background-color:  #87b391b3;
	border-radius:  100%;
}
.text  {
	margin:  15px  0  30px;
}
.text  p  {
	display:  inline-block;
	width:  250px;
	padding:  5px;
	background-color:  #87b391;
	font-size:  14px
}
.text  span:first-child  {
	width:  50px;
}
.text  span:last-child  {
	width:  80px;
}
```
and little bit of HTML

```html
<div  class="container">
	<input  id="toggle"  type="checkbox">
	<label  class="toggle-container"  for="toggle">
	<span  class="button button-toggle"></span>
	</label>
	<nav  class="nav">
		<a  class="nav-item"  href="">Your tasks</a>
		<a  class="nav-item"  href="">Add new one</a>
		<a  class="nav-item"  href="">History</a>
		<a  class="nav-item"  href="">Settings</a>
	</nav>
	<section  class="content">
		<img  class="circle"  src="https://gravatar.com/avatar/4ecf4664076bcd472cf3255ae2b94433?s=400&d=robohash&r=x">
		<div  class="text">
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
			et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
			</p>
		</div>
	</section>
</div>
```
The final output looks like this:

![enter image description here](https://i.ibb.co/1LpR0QS/final.gif)

Thank you all!