Video Tutorial:
If you prefer to code along with a video tutorial rather than reading this blog post, check out the video here down below. I post more such tips, tutorials and resources on my youtube channel. Subscribe to my youtube channel to stay updated with these resources.
Project Folder Structure:
Before we even start coding let us first create the project folder structure. For this, create a project folder called Corner Menu. Inside this folder, we have three files. These are – index.html, style.css and script.js.
The first file is the HTML document, the second is the stylesheet, and the final file is the script file. We have used font awesome CDN link in the head section of our HTML document. The CDN allows us to use Font Awesome Icons in our code.
HTML:
We start with the HTML code. Now copy the code provided below and paste it into your HTML file. This creates the layout required to build the corner menu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Corner Menu</title>
<!-- Font Awesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="menu">
<a href="#account">
<i class="fas fa-user"></i>
</a>
<a href="#info">
<i class="fas fa-info"></i>
</a>
<a href="#message">
<i class="fas fa-comment-dots"></i>
</a>
<a href="#contact">
<i class="fas fa-phone-alt"></i>
</a>
<button id="toggle-btn">
<i class="fas fa-plus"></i>
</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style the menu using CSS. Copy the code below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #4249ed;
}
#toggle-btn,
.menu a {
position: absolute;
display: grid;
place-items: center;
border-radius: 50%;
}
.menu a {
background-color: #ffffff;
height: 70px;
width: 70px;
font-size: 22px;
color: #4249ed;
text-decoration: none;
top: 30px;
left: 30px;
transition: 0.5s;
}
#toggle-btn {
background-color: #0f1730;
color: #ffffff;
height: 100px;
width: 100px;
border: none;
font-size: 40px;
top: 15px;
left: 15px;
transition: 0.3s;
cursor: pointer;
}
.active {
transform: rotate(45deg);
}
Javascript:
Finally, all that is left is to implement the functionality. Now copy the code below and paste it into your javascript file. We have used simple logic to implement the functionality.
let toggleBtn = document.getElementById("toggle-btn");
let menuItems = document.querySelectorAll(".menu a");
let menuActive = false;
toggleBtn.addEventListener("click", () => {
if (!menuActive) {
menuItems[0].style.transform = "translate(150px,0)";
menuItems[1].style.transform = "translate(150px,90px)";
menuItems[2].style.transform = "translate(90px,150px)";
menuItems[3].style.transform = "translate(0,150px)";
menuActive = true;
toggleBtn.classList.add("active");
} else {
menuItems.forEach((menuItem) => {
menuItem.style.transform = "translate(0,0)";
});
menuActive = false;
toggleBtn.classList.remove("active");
}
});
Your corner menu is now ready. You can go ahead and customize it the way you like. If you have any issues while creating this code, please download the source code by clicking on the download code button below.
Also, if you have queries, suggestions and feedback, do post them in the comments below.
Happy Coding!
so first of all great im trying to center it which is all good but its not responsive, so on a mobile screen you have to scroll right to see it, can you help plz