Social Share Icons with Dropdown on-click
Tue Feb 27 2024 21:07:04 GMT+0000 (Coordinated Universal Time)
Saved by @Y@sir #social-share-icons #share-icons #social-share-buttons
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <style> @import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); :root { --primary: #015478; --white: #fff; --icon-clr: #aaaaaa; --facebook-clr: #3b5998; --twitter-clr: #55acee; --instagram-clr: #bc2a8d; --reddit-clr: #ff4500; } * { margin: 0; padding: 0; box-sizing: border-box; list-style: none; text-decoration: none; font-family: "Open Sans", sans-serif; user-select: none; } .ss_wrap { position: relative; margin: 0px !important; } .ss_wrap .ss_btn { background: var(--white); color: var(--icon-clr); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; gap: 3px; font-size: 1.4rem; border-radius: 3px; cursor: pointer; } .ss_btn .icon { display: flex; } .dd_list .icon{ font-size: 1.3rem; } .ss_wrap .dd_list { position: absolute; } .ss_wrap .dd_list ul { display: none; width: auto; background: var(--white); margin: 0 10px; box-shadow: 0px 0px 20px #ededed; border-radius: 3px; position: relative; } .ss_wrap .dd_list ul li a { display: flex; width: 50px; height: 50px; margin: 0 10px; justify-content: center; align-items: center; color: var(--icon-clr); } .ss_wrap .dd_list ul:before { content: ""; position: absolute; border: 8px solid; } /* social share 3 */ .ss_wrap.ss_wrap_3 { display: flex; justify-content: center; align-items: center; } .ss_wrap.ss_wrap_3 .dd_list { top: 50px; left: 50%; transform: translateX(-50%); } .ss_wrap.ss_wrap_3 .dd_list ul { flex-direction: column; width: 175px; border-radius: 3px; } .ss_wrap.ss_wrap_3 .dd_list ul li a { width: 100%; margin: 0; justify-content: unset; padding: 0 10px; } .ss_wrap.ss_wrap_3 .dd_list ul li a span { display: flex; } .ss_wrap.ss_wrap_3 .dd_list ul li a span.icon { width: 25px; margin-right: 10px; } .ss_wrap.ss_wrap_3 .dd_list ul li a span.text { width: 125px; } .ss_wrap.ss_wrap_3 .dd_list ul:before { top: -15px; left: 50%; transform: translateX(-50%); border-color: transparent transparent var(--primary) transparent; } .ss_wrap.ss_wrap_3 .icon{ color: black; } .ss_wrap.ss_wrap_3 span.text:hover { color: var(--primary); } .ss_wrap .ss_btn.active + .dd_list ul { display: flex; } </style> </head> <body> <div class="social_share_wrap"> <div class="ss_wrap ss_wrap_3"> <div class="ss_btn"> <span class="icon"> <ion-icon name="share-social"></ion-icon> </span>Share </div> <div class="dd_list"> <ul> <li><a href="#" class="facebook" onclick="shareFacebook()"> <span class="icon"> <ion-icon name="logo-facebook"></ion-icon> </span> <span class="text"> Facebook </span> </a></li> <li><a href="#" class="whatsapp" onclick="shareWhatsapp()"> <span class="icon"> <ion-icon name="logo-whatsapp"></ion-icon> </span> <span class="text"> Whatsapp </span> </a></li> <li><a href="#" class="email" onclick="shareEmail()"> <span class="icon"> <ion-icon name="mail"></ion-icon> </span> <span class="text"> Email </span> </a></li> <li><a href="#" class="sms" onclick="shareSMS()"> <span class="icon"> <ion-icon name="chatbox"></ion-icon> </span> <span class="text"> SMS </span> </a></li> <li><a href="#" class="copy-link" onclick="copyLink()"> <span class="icon"> <ion-icon name="copy"></ion-icon> </span> <span class="text"> Copy Link </span> </a></li> </ul> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function () { var ss_btn_3 = document.querySelector(".ss_wrap_3 .ss_btn"); var dd_list_3 = document.querySelector(".ss_wrap_3 .dd_list"); ss_btn_3.addEventListener("click", function (event) { event.stopPropagation(); this.classList.toggle("active"); }); dd_list_3.addEventListener("click", function (event) { event.stopPropagation(); }); // Add an event listener to close the dropdown when clicking anywhere outside document.addEventListener('click', function () { ss_btn_3.classList.remove("active"); }); // Prevent event propagation when clicking on icons var icons = document.querySelectorAll(".ss_wrap_3 .icon"); icons.forEach(function (icon) { icon.addEventListener("click", function (event) { event.stopPropagation(); }); }); }); function showCopiedMessage() { alert('Link Copied'); } function shareFacebook() { window.open('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href)); } function shareWhatsapp() { window.open('https://api.whatsapp.com/send?text=' + encodeURIComponent(window.location.href)); } function shareEmail() { window.open('mailto:?body=Check this out: ' + encodeURIComponent(window.location.href)); } function shareSMS() { window.open('sms:&body=' + encodeURIComponent(window.location.href)); } function copyLink() { var dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.value = window.location.href; dummy.select(); document.execCommand("copy"); document.body.removeChild(dummy); // Show the "Link Copied" message showCopiedMessage(); } // Add an event listener to close the share box when clicking anywhere on the screen document.body.addEventListener('click', function (event) { // Check if the click is outside the share box var shareBox = document.querySelector('.social_share_wrap'); if (!shareBox.contains(event.target)) { // Clicked outside the share box, close it var ss_btn = document.querySelector(".ss_wrap_3 .ss_btn"); ss_btn.classList.remove("active"); } }); </script> </body> </html>
Social Share Icons / Buttons with Dropdown on-click
https://codepen.io/RajRajeshDn/pen/abVXzqZ
Comments