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 hide the rest of the contents using simple CSS and Javascript

    How to fake width animation with CSS transform?

    How to make a CSS menu from raw HTML code

    How to use getElementId on and ID's Element

    How to put 2 text input fields in one?

    How to ensure three DIV are the same height regardless of content

    How to use CSS first-child but excluding text content

    How to make a scroll customization for mobile application?

    How to center in CSS only after specific HTML element?

    How can I get my text to hug around the top of my image?

    How to vertically center content in before or after in CSS

    How can I make jQuery's draggable function expand the container?

    How do I light up an entire single row by hovering on a span in one of the columns?

    Navbar on left of page, how to let content resize to match screen size?

    CSS simple menu - how to align?

    How Do I Modify My Linear Gradient Width to 100%?

    How do I vertically centering text inside a responsive box that has a (fluid height) [duplicate]

    How to use a Drive hosted css to customize the receiver?

    How to draw solid/dotted/dashed lines using most basic HTML/CSS possible (for tcpdf to render them correctly)

    How can I style a button to look the same as the home button in Google Chrome with CSS? [closed]

    How to extend the background of a CSS-arrow to the whole page width?

    How to make text appear at the top left corner?

    How to make footer invisible on making screen size smaller?

    How to include css files in JSP page struts2?

    How to achieve a CSS footer “curtain” effect?

    how to toggle image in HTML-CSS? [duplicate]

    Change Class or CSS “display” property of a DIV and show it smoothly

    How to place object in relation to window browser in css/html?

    How to generate regular CSS file from SASS?

    how to change a css background onclick