0

如何创建一个简单的 HTML/CSS 社交共享菜单，类似于http://bitquill.com/上每篇文章底部的菜单- （我知道这是我的网站，但我没有编写共享菜单的代码。我正在使用 Squarespace 模板并且喜欢他们的共享菜单并希望在其他地方重新创建它。）

4

2 回答 2

2

您必须使用每个站点的 API 来获取按钮/徽章。例如，您必须查看 Facebook 赞按钮的文档：https ://developers.facebook.com/docs/reference/plugins/like/并以这种方式获取代码。

创建菜单：

使用 a 创建一个共享按钮div，然后在其后放置另一个div，即菜单。风格随你喜欢。然后，制作菜单display: none- 这将隐藏它。使用 JS 将按钮的点击事件绑定到显示菜单的函数：

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>
于 2013-04-07T01:39:07.843 回答
0

这是一个简单的例子。您设置了一个容器 div（必须具有位置：相对）和菜单 div（具有定位：绝对）。页面加载时使用 jQuery 隐藏菜单 div。当用户单击 Share 时，将显示 div。

您从 Facebook 获得的 API 代码将放置在包含 Facebook 占位符文本的 div 中。

要详细了解示例中的菜单是如何实现的，请使用 Chrome 打开页面。右键单击“共享”并转到“检查元素”。

<script type="text/javascript">
    $(document).ready(function () {
        //Initally hide social-menu div
        $("#social-menu").hide();

        //When social-button is pressed, show social-menu
        $("#social-button").click(function () {
            $("#social-menu").show();
        });
    });


<div id="social-button" >Share</div>          
    <div id="social-container" style="position:relative;">
    <div id="social-menu" style="position:absolute;top:0px;bottom:0px;z-index:10" >
        <div>Facbook</div>
        <div>Google +</div>
    </div>
</div>
于 2013-04-07T01:53:32.883 回答