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.
* {
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
<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:
Thank you all!
Top comments (0)