Let’s create a Magic Social Share Menu using HTML, CSS, and a bit of JavaScript for the toggle effect. This menu will display a floating share button that expands beautifully to reveal social icons when clicked – perfect for adding stylish sharing options to your website.
We’ll use:
- HTML to structure the share button and icons
- CSS to style and animate the expanding effect
- JavaScript to handle the toggle functionality with a small script
Whether you’re a beginner or a pro, this fun and functional project is a great way to improve your front-end skills and add a magical touch to your site. Let’s make sharing look cool! 🚀✨
HTML :
This code creates a circular share menu with a central toggle button; when clicked, it animates and reveals social media icons around it using CSS variables and transitions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magic Social Share Menu | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<div class="menu">
<div class="toggle">
<ion-icon name="share-social"></ion-icon>
</div>
<li style="--i: 0; --clr: #1877f2">
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li style="--i: 1; --clr: #25d366">
<a href="#"><i class="fab fa-whatsapp"></i></a>
</li>
<li style="--i: 2; --clr: #1b1e21">
<a href="#"><i class="fab fa-x-twitter"></i></a>
</li>
<li style="--i: 3; --clr: #ff5733">
<a href="#"><i class="fab fa-reddit-alien"></i></a>
</li>
<li style="--i: 4; --clr: #0a66c2">
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
<li style="--i: 5; --clr: #c32aa3">
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
<li style="--i: 6; --clr: #1b1e21">
<a href="#"><i class="fab fa-github"></i></a>
</li>
<li style="--i: 7; --clr: #ff0000">
<a href="#"><i class="fab fa-youtube"></i></a>
</li>
</div>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'></script>
<script src="./script.js"></script>
</body>
</html>
CSS :
This CSS styles a circular radial menu with a center toggle button. When the toggle is clicked (adding the active class), it rotates and reveals hidden menu items around it in a circular layout using transform and custom --i values. The menu items scale up smoothly from 0 to full size and rotate back to stay upright, each styled as a round icon button with hover effects. The layout is centered using Flexbox and has a dark background for contrast.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #252432;
}
.menu {
position: relative;
width: 280px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
}
.menu .toggle {
position: relative;
height: 60px;
width: 60px;
background: #fff;
border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
display: flex;
align-items: center;
justify-content: center;
color: #333;
font-size: 2rem;
cursor: pointer;
transition: 1.25s;
z-index: 5;
}
.menu.active .toggle {
transform: rotate(360deg);
box-shadow:
0 6px 8px rgba(0, 0, 0, 0.15),
0 0 0 2px #333,
0 0 0 8px #fff;
}
.menu li {
position: absolute;
left: 0;
list-style: none;
transition: 0.5s;
transform: rotate(calc(360deg / 8 * var(--i)));
transform-origin: 140px;
scale: 0;
transition-delay: calc(0.05s * var(--i));
}
.menu.active li {
scale: 1;
}
.menu li a {
position: relative;
display: flex;
transform: rotate(calc(360deg / -8 * var(--i)));
width: 60px;
height: 60px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.75rem;
color: var(--clr);
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
transition: 0.5s;
text-decoration: none;
}
.menu li:hover a {
font-size: 2.5rem;
box-shadow:
0 0 0 2px var(--clr),
0 0 0 6px #fff;
}
JavaScript:
This code selects two elements from the HTML: one with the class .menu and one with .toggle. When the .toggle element is clicked, it adds or removes the active class on the .menu element, allowing for a toggle effect (like showing or hiding a menu).
const menu=document.querySelector(".menu");
const toggle=document.querySelector(".toggle");
toggle.addEventListener("click",()=>{
menu.classList.toggle("active");
})
In conclusion, building a Magic Social Share Menu with HTML, CSS, and a bit of JavaScript adds an interactive and modern feature to your web pages. It’s simple to make and brings both functionality and style in one small element. Keep experimenting and leveling up your web designs! 🔄💫
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
