Creating a Responsive CSS-only Circular Menu
A circular menu is a unique and stylish way to display navigation options on your website. In this blog post, we will learn how to create a responsive CSS-only circular menu, which adapts to different screen sizes and devices. No JavaScript is needed for this implementation.
Step 1: HTML Structure
First, we need to create the basic HTML structure for our circular menu. We will use an unordered list with each list item representing a menu item.
<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="circular-menu.css">
<title>Responsive CSS-only Circular Menu</title>
</head>
<body>
<nav class="circular-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>Step 2: Basic CSS Styling
Now, let’s add some basic styling to our menu. We will position the circular menu in the center of the screen and remove the default list styles.
/* CSS */
body, html {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f2f2;
}
.circular-menu {
position: relative;
}
.circular-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.circular-menu li {
position: absolute;
transform-origin: 100% 100%;
}
.circular-menu a {
display: block;
width: 100px;
height: 100px;
background-color: #3f51b5;
text-decoration: none;
color: white;
text-align: center;
line-height: 100px;
border-radius: 50%;
}Step 3: Positioning Menu Items
To position the menu items in a circular layout, we need to calculate their rotation angle and distance from the center.
/* CSS */
.circular-menu li {
position: absolute;
transform-origin: 100% 100%;
transition: all 0.5s ease;
}
.circular-menu li:nth-child(1) {
transform: rotate(0deg) translate(200px) rotate(-0deg);
}
.circular-menu li:nth-child(2) {
transform: rotate(72deg) translate(200px) rotate(-72deg);
}
.circular-menu li:nth-child(3) {
transform: rotate(144deg) translate(200px) rotate(-144deg);
}
.circular-menu li:nth-child(4) {
transform: rotate(216deg) translate(200px) rotate(-216deg);
}
.circular-menu li:nth-child(5) {
transform: rotate(288deg) translate(200px) rotate(-288deg);
}Step 4: Making the Menu Responsive
To make our circular menu responsive, we can use media queries to adjust the size and position of the menu items based on screen size.
/* CSS */
@media (max-width: 767px) {
.circular-menu li {
transition: all 0.5s ease;
}
.circular-menu a {
width: 80px;height: 80px;
line-height: 80px;
}
.circular-menu li:nth-child(1) {
transform: rotate(0deg) translate(160px) rotate(-0deg);
}
.circular-menu li:nth-child(2) {
transform: rotate(72deg) translate(160px) rotate(-72deg);
}
.circular-menu li:nth-child(3) {
transform: rotate(144deg) translate(160px) rotate(-144deg);
}
.circular-menu li:nth-child(4) {
transform: rotate(216deg) translate(160px) rotate(-216deg);
}
.circular-menu li:nth-child(5) {
transform: rotate(288deg) translate(160px) rotate(-288deg);
}
}Step 5: Adding Hover Effects
To give our circular menu a polished look, let’s add hover effects to the menu items.
/* CSS */
.circular-menu a:hover {
background-color: #536dfe;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
transition: all 0.3s ease;
}Conclusion:
We’ve created a responsive CSS-only circular menu that adapts to different screen sizes and devices. This menu is a unique and stylish way to display navigation options on your website, and it doesn’t require any JavaScript. Feel free to customize the menu’s appearance and functionality to fit your design needs.