KamCode: Social Share Menu

Social Share Menu

Create an Eye-Catching Social Share Menu in Minutes

How to create Analog Clock using Html Css and Javascrip

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="style.css">
    <title>Social Share Menu</title>
</head>
<body>
    <div class="menu">
        <div class="toggle">
            <img src="/images/share.png" alt="">
        </div>
        <li style="--item: 0;">
            <a href="#"><img src="/images/facebook.png" alt=""></a>
        </li>
        <li style="--item: 1;">
            <a href="#"><img src="/images/youtube.png" alt=""></a>
        </li>
        <li style="--item: 2;">
            <a href="#"><img src="/images/twitter.png" alt=""></a>
        </li>
        <li style="--item: 3;">
            <a href="#"><img src="/images/dribbble.png" alt=""></a>
        </li>
        <li style="--item: 4;">
            <a href="#"><img src="/images/linkedin.png" alt=""></a>
        </li>
        <li style="--item: 5;">
            <a href="#"><img src="/images/instagram.png" alt=""></a>
        </li>
        <li style="--item: 6;">
            <a href="#"><img src="/images/pinterest.png" alt=""></a>
        </li>
        <li style="--item: 7;">
            <a href="#"><img src="/images/whatsapp.png" alt=""></a>
        </li>
    </div>
    <script src="script.js"></script> 
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #fff;
}

.menu {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu .toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50px;
    height: 50px;
    color: #222;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    transition: 1.25s;
    z-index: 999;
}

.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(--item)));
    transform-origin: 140px;
    scale: 0;
    transition-delay: calc(0.05s * var(--item));
}

.menu.active li {
    scale: 1;
}

.menu li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(calc(360deg/-8 * var(--item)));
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}

 img {
    height: 50px;
    width: 50px;
    border-radius: 5px;
}

.menu li img:hover {
    height: 40px;
    width: 40px;
    transition: 0.5s;
}

JAVASCRIPT

const menu = document.querySelector('.menu');
const toggle = document.querySelector('.toggle');
const images = document.querySelectorAll('img');

toggle.addEventListener('click', () => {
    menu.classList.toggle('active');
});

images.forEach(img => {
    img.addEventListener('click', () => {
        const audio = new Audio("click.mp3");
        audio.play();
    });
});

Social Share Menu

Create an Eye-Catching Social Share Menu in Minutes

How to create Analog Clock using Html Css and Javascrip

KamCode | All right reserved.