Share Options Drop-Down Menu

Proof of concept using jQuery UI of a drop down menu that features sharing tools.

by Jonathan McGlone

HTML

<div class="share" href="#"> <span class="share-btn">Share+</span>

    <div class="social">
        <ul>
            <li><a href="#">Twitter</a>

            </li>
            <li><a href="#">Facebook</a>

            </li>
            <li><a href="#">Google+</a>

            </li>
            <li><a href="#">Reddit</a>

            </li>
        </ul>
    </div>
</div>
<div>
    <p>Blah blah blah blah blah blah blah</p>
</div>

CSS

.share {
    width: 80px;
    position: relative;
    font-size: 1em;
}
.share-btn {
    margin-bottom: 5px;
        font-size: .70em;
}
.share-btn-hover {
    background: #40658f;
    color: #fff;
}
.social {
    background: #40658f;
    color: #fff;
    text-align: center;
    display: none;
    width: 90px;
    position: absolute;
    z-index: 2;
}
.social ul {
    list-style: none;
    padding: 10px 0px;
    width: inherit;
}

.social a { color: #fff; }

.reveal {
    display: block;
}

JavaScript

$(".share-btn").button();

$(".share")
    .mouseenter(function () {
    $(".social")
        .toggleClass("reveal");
})
    .mouseleave(function () {
    $(".social")
        .removeClass("reveal");
});