Pentagon Menu using CSS
Pentagon Menu using CSS

Pentagon Men using CSS is a menu where five menu items are arranged in a pentagon shape. In the center, the open and close button lives. This menu is created by Kit Jenson on Codepen.

Table of Contents

Also, Read – Rating Animation CSS

How to create a Pentagon menu using CSS?

To create a pentagon menu we will follow the below steps

Step 1: HTML

First, we will create an index.html file and write the HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Pentagon Menu using CSS</title>
  </head>
  <body>
    <nav class="menu open_menu">
      &equiv;
      <a class="nav-item" title="Home" href="#">🏠&#xFE0E;</a>
      <a class="nav-item" title="Search" href="#">πŸ”ŽοΈŽ&#xFE0E;</a>
      <a class="nav-item" title="Notifications" href="#">πŸ””&#xFE0E;</a>
      <a class="nav-item" title="Favorites" href="#">❀&#xFE0E;</a>
      <a class="nav-item" title="Profile" href="#">πŸ‘€&#xFE0E;</a>
    </nav>
    <script src="main.js"></script>
  </body>
</html>

Step 2: CSS

Now, we will create a style.css file and copy the below code to it

body {
  --btn-size: 150px;
  --accent-color: red;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #efefef;
  font-size: calc(var(--btn-size) * 0.55);
}

.menu {
  position: relative;
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  cursor: pointer;
  user-select: none;
  transition: 0.75s;
  line-height: 100%;
}
.menu:after {
  content: "\2630";
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  background: var(--accent-color);
  border-radius: inherit;
  font-size: calc(var(--btn-size) * 0.48);
  transition: 0.75s;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.open_menu:after {
  content: "\00D7";
  background: gray;
}

.nav-item {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--accent-color);
  position: absolute;
  transition: 0.75s;
  user-select: none;
  left: 0;
  top: 0;
  transform: scale(0.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  font-family: sans-serif;
  color: white;
  box-sizing: border-box;
  display: grid;
  place-items: center;
}

.open_menu .nav-item {
  transform: scale(1) rotate(360deg);
}
.open_menu .nav-item:hover {
  transform: scale(1.25) rotate(360deg);
}

.open_menu .nav-item:nth-child(1) {
  top: calc(var(--btn-size) * -0.4);
  left: calc(var(--btn-size) * -1.2);
}
.open_menu .nav-item:nth-child(2) {
  top: calc(var(--btn-size) * -1.2);
  left: 0px;
}
.open_menu .nav-item:nth-child(3) {
  top: calc(var(--btn-size) * -0.4);
  left: calc(var(--btn-size) * 1.2);
}
.open_menu .nav-item:nth-child(4) {
  top: calc(var(--btn-size) * 1);
  left: calc(var(--btn-size) * -0.8);
}
.open_menu .nav-item:nth-child(5) {
  top: var(--btn-size);
  left: calc(var(--btn-size) * 0.8);
}

Step 3: Javascript

Finally, we will create a main.js file and write the below code

document.querySelector(".menu").addEventListener("click", function () {
  this.classList.toggle("open_menu");
});

That’s it.

The source code is available on Github.

If you find this post helpful then please share this with your friends.

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply