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