HomeCSSPop Out Corner Menu | HTML, CSS & Javascript Tutorial

Pop Out Corner Menu | HTML, CSS & Javascript Tutorial

Hey Everyone. Welcome to today’s tutorial from Coding Artist. In this tutorial, we will learn how to create a corner menu. To create this stunning menu we need HTML, CSS and vanilla Javascript.
 
If you are looking for more such tutorials on creative menus, you can check out this playlist here. It consists of cool menu designs created using HTML, CSS and JS.

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!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

3 + twenty =

Most Popular