어제 블로그에 공유 버튼 을 설치했는데, 그 코드를 올려봅니다.
w3schools.com의 HowTo 에서 보고 따라했습니다.
(코드는 좀 바꿔봤습니다.)
원래 이름은 Clickable Dropdown 인가 봅니다.
아이콘은 Font Awesome 을 사용했습니다.
공유 아이콘 버튼을 클릭하면 메뉴가 뜹니다. 버튼을 다시 클릭하거나 또는 웹페이지의 아무데나 클릭하면 메뉴가 닫힙니다.
테스트로 Blogger 버튼를 클릭하면 alert 메세지가 뜨게 했습니다.
(그런데 코드를 이렇게 짜도 되는건지 모르겠네요. 특히 class이름 이라던가...)
<-- 이게 만든거에요.
코드 보기
<!DOCTYPE html>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css' rel='stylesheet'/>
<style>
.sharemenu {
display: inline-block;
position: relative;
}
.sharemenu-btn {
color: #555;
font-size: 20px;
}
.sharemenu-content {
display: none;
position: absolute;
width: max-content;
z-index: 1;
font-size: 18px;
padding: 8px 0;
background: white;
box-shadow: 0 1px 3px gray;
}
.sharemenu-content a {
color: black;
padding: 5px 10px;
text-decoration: none;
display: block;
}
.sharemenu-content a:hover { background: #eee; }
.sharemenu-content i { font-size: 24px; }
.show { display: block; }
</style>
<div class="sharemenu">
<a href="javascript:void(0)" class="sharemenu-btn"
onclick="share_toggle()">
<i class='fas fa-share-square'></i>
</a>
<div class="sharemenu-content" id="shareContent">
<a href="#" onclick="alert('Blogger')"><i class='fab fa-blogger'
style='color:orangered'></i> Blogger</a>
<a href="#"><i class='fab fa-twitter-square'
style='color:dodgerblue'></i> Twitter</a>
<a href="#"><i class='fab fa-facebook-square'
style='color:blue'></i> Facebook</a>
</div>
</div>
<script>
function share_toggle() {
document.getElementById("shareContent").classList.toggle("show");
event.stopPropagation();
}
window.addEventListener("click", function() {
document.getElementById("shareContent").classList.remove("show");
});
</script>
