0

http://bitquill.com/の各投稿の下部にあるものと同様の単純な HTML/CSS ソーシャル共有メニューを作成するにはどうすればよいですか— (これが私のサイトであることは知っていますが、共有メニューをコーディングしていません。私は Squarespace テンプレートを使用しており、その共有メニューが大好きで、別の場所で再作成したいと考えています.)

4

2 に答える 2

2

ボタン/バッジを取得するには、各サイトの API を使用する必要があります。たとえば、Facebook の「いいね」ボタンのドキュメント ( https://developers.facebook.com/docs/reference/plugins/like/ ) を確認し、その方法でコードを取得する必要があります。

メニューを作成するには:

を使用して共有ボタンを作成し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 (position:relative を持つ必要があります) とメニュー div (position:absolute を持つ) を設定します。jQuery を使用して、ページの読み込み時にメニュー div を非表示にします。ユーザーが [共有] をクリックすると、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 に答える