我如何创建一个简单的 HTML/CSS 社交分享菜单，类似于 http://bitquill.com/ 上每篇文章底部的菜单？ —(我知道这是我的网站，但我没有编写共享菜单代码。我使用的是 Squarespace 模板并且喜欢他们的共享菜单并想在其他地方重新创建它。)
最佳答案
您必须使用每个站点的 API 来获取按钮/徽章。例如，您必须查看 Facebook 点赞按钮的文档:https://developers.facebook.com/docs/reference/plugins/like/并以这种方式获取代码。
创建菜单:
用一个div做一个分享按钮，然后在它后面放另一个div，就是菜单。风格随心所欲。然后，使菜单 display: none - 这将隐藏它。使用JS将按钮的点击事件绑定(bind)到显示菜单的函数:
HTML
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
CSS
.menu {
display: none;
}
JS
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
因此您的整个 HTML 文件应该如下所示:
<html>
<head>
<style>
.menu {
display: none;
}
</style>
</head>
<body>
<div class="share">Share</div>
<div class="menu">
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Stack</li>
</ul>
</div>
<!-- This is the jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$('body').on('click', function (e) {
if (e.target.className !== 'share')
$('.menu').css('display', 'none');
else
$('.menu').css('display', 'block');
});
</script>
</body>
</html>
关于html - 如何在 CSS/HTML 中创建一个简单的社交分享下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15857952/