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.
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">
≡
<a class="nav-item" title="Home" href="#">🏠︎</a>
<a class="nav-item" title="Search" href="#">🔎︎︎</a>
<a class="nav-item" title="Notifications" href="#">🔔︎</a>
<a class="nav-item" title="Favorites" href="#">❤︎</a>
<a class="nav-item" title="Profile" href="#">👤︎</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.
