CSS Mobile Menu Animation: A Step-by-Step Guide

Mastering Mobile Menus: A Step-by-Step Guide

When designing websites for mobile devices, one of the biggest challenges is creating menus that are both functional and visually appealing. In this tutorial, we’ll show you how to build three different types of animated mobile menus using HTML and CSS only – no JavaScript required!

Building an Animated, Slide-In Side Menu

To get started, create a new project folder and add an index.html and styles.css file. In the HTML file, add the basic boilerplate code, and don’t forget to import your CSS file.

Next, create the mobile screen content by adding the following code:
“`html


Now, let's style the mobile screen by adding the following code to our CSS file:
css
.mobile-screen {
width: 100%;
height: 100vh;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
}

.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #333;
color: #fff;
}

.hamburger {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
background-color: #333;
cursor: pointer;
}

.hamburger span {
display: block;
width: 20px;
height: 2px;
background-color: #fff;
transition: 0.3s;
}

.hamburger span:before,
.hamburger span:after {
content: “”;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 2px;
background-color: #fff;
transition: 0.3s;
}

.hamburger span:before {
transform: translateY(-5px);
}

.hamburger span:after {
transform: translateY(5px);
}

.menu-items {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
transform: translateX(-100%);
transition: 0.3s;
}

.menu-items li {
margin-bottom: 20px;
}

.menu-items a {
color: #333;
text-decoration: none;
}

.menu-items a:hover {
color: #666;
}
“`
Animating the Hamburger Menu

To animate the hamburger menu, add the following code to our CSS file:
“`css
.hamburger:checked +.menu-items {
transform: translateX(0);
}

.hamburger:checked +.menu-items li {
opacity: 1;
transform: translateY(0);
}

.hamburger:checked +.menu-items li:before {
opacity: 1;
transform: translateY(0);
}

.hamburger:checked +.menu-items li:after {
opacity: 1;
transform: translateY(0);
}
“`
Final Steps

To complete our animated slide-in side menu, add the following code to our CSS file:
“`css
.mobile-screen {
overflow-x: hidden;
}

.nav-bar {
position: relative;
}

.hamburger {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
}

.menu-items {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f2f2f2;
padding: 20px;
box-sizing: border-box;
transform: translateX(-100%);
transition: 0.3s;
}
“`
Building an Animated, Slide-Down Menu

To build an animated slide-down menu, we’ll create a new HTML structure and add the following code:
“`html

“`
The CSS code for the slide-down menu is similar to the slide-in side menu, with some minor adjustments.

Bonus: Building a Multilevel Animated Menu

To build a multilevel animated menu, we’ll create a new HTML structure and add the following code:
“`html

“`
The CSS code for the multilevel animated menu is similar to the previous examples, with some additional styles to handle the submenu items.

That’s it! With these tutorials, you should now have a solid understanding of how to create animated mobile menus using HTML and CSS only. Happy coding!