How to create a simple social sharing dropdown menu in CSS/HTML


Tags: html,css

Problem :

How can I create a simple HTML/CSS social sharing menu similar to the one found at the bottom of each post on http://bitquill.com/ — (I know it's my site, but I didn't code the sharing menu. I'm using a Squarespace template and love their sharing menu and want to re-create it elsewhere.)



Solution :

You have to use an API from each site to get the buttons/badges. For example, you have to review the docs for the Facebook like button: https://developers.facebook.com/docs/reference/plugins/like/ and get the code that way.

To create the menu:

Make a share button using a div, then put another div after it, which is the menu. Style to your liking. Then, make the menu display: none - this will hide it. Use JS to bind the button's click event to a function that shows the menu:

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');
});

So your entire HTML file should look like:

<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>

    CSS Howto..

    How to use jquery to cycle elements bg color on click, and reset upon another element's click

    How to give priority to a div in terms of overlapping divs on a drop down menu?

    CSS how to round of percent values to whole number pixel

    How do I change the overflow of a single element, while having the overflow of the body hidden?

    How to move content in ul to the center HTML + CSS

    How to position a div under a link on click?

    How to put CSS content in select box and rotate it?

    How to add composite css -webkit-mask-image?

    How to give reference to static resources like css,images,java script in JSP?

    how to go bottom of a website like back to top using javascript?

    How implement a button clear in a RadDatePicker

    how to use text-indent only with element not ont it's :before Selector?

    How can I set the correct position of the text in CSS?

    How can I expand a div to compensate for removing the bordering div's margin?

    how to color share price changes: using css() method on dynamically created elements?

    How to center
      in a page?

    How to change rows in css from 3x3 on desktop, to 2x4 on mobile?

    How to apply css transformations on HTML elements using jQuery?

    How to make width grow slowly when I add element?

    ExtJS 4.2 How to set grid filter height when header text is wrapped?

    How to center images in div

    How can I position list in
    ?

    How to have a color change animation on a button outline?

    How to get the effect not to add one more div?

    How to vertically align lists when one li is a div

    How to make text float on top of an image html css

    How to get partial scroll bar in html page?

    How to align specific element to the right using :last-child pseudo

    How to add a class to a menu item that has children

    How to check if two elements are toggled using Jquery?