AddThis

Instruction and Assets

A minimal single column menu makes sharing small, focused and slick. jQuery powers the hover effect. Be sure to grab the Toolbox code and update the addthis script file with your username (if you want analytics).

Download Example Try Demo

The CSS

/* AddThis Vertical Hover Menu */

.addthis_toolbox .custom_hover {
    position: relative;
}

.addthis_toolbox .custom_hover .custom_button {
    font-weight: bold;
    padding: 6px 12px 6px 12px;
    color: #00bff3;
    cursor: pointer;
    -moz-border-radius: 5px 5px 0 0;    
    -webkit-border-radius: 5px 5px 0 0;
}

.addthis_toolbox .custom_hover .custom_button.active {
    background-color: #eee;
}

.addthis_toolbox .hover_menu  {
    display: none;
    position: absolute;
    background: #fff;
}

.addthis_toolbox .custom_hover .tower {
    -webkit-border-radius: 0 5px 0 0;   
    -moz-border-radius-topleft: 0;
    
}
.addthis_toolbox .hover_menu  {
    width: 136px;
    padding: 1px;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .hover_menu a {    
    position: relative;
    display: block;
    width: 102px;
    padding: 4px 0 4px 34px;
    text-decoration: none;
    color: #00bff3;
}

.addthis_toolbox .hover_menu a:hover {    
    background: #f5f5f5;
    color: #027999;
    text-decoration: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.addthis_toolbox .hover_menu span {
    position: absolute;
    left: 14px;
    top: 4px;
}

.addthis_toolbox .hover_menu .more {
    border-top: solid 1px #eee;
    padding: 10px 0 0 0;
    margin: 10px 10px 0 10px;
    text-align: center;
}

.addthis_toolbox .hover_menu .more a {
    padding: 4px 0;
    margin: 0;
}

.addthis_toolbox .hover_menu .more a:hover {
    background: none;
}
.addthis_toolbox .hover_menu .more span {
    display: none;
}

The HTML

<div class="addthis_toolbox">
    <div class="custom_hover">
        <span class="custom_button">Hover over me</span>
    </div>
    <div class="hover_menu">
        <div class="column1">
            <a class="addthis_button_email">Email</a>
        </div>
        <div class="column2">
            <a class="addthis_button_print">Print</a>
        </div>
        <div class="clear"></div>
        <div class="top"></div>
        <div class="column1">
            <a class="addthis_button_twitter">Twitter</a>
            <a class="addthis_button_facebook">Facebook</a>
            <a class="addthis_button_myspace">MySpace</a>
        </div>
        <div class="column2">
            <a class="addthis_button_delicious">Delicous</a>
            <a class="addthis_button_stumbleupon">Stumble</a>
            <a class="addthis_button_digg">Digg</a>
        </div>
        <div class="clear"></div>
        <div class="more">
            <a class="addthis_button_expanded">More...</a>
        </div>
    </div>
</div>

The Javascript

Include the following AddThis script file anywhere in your page (usually before the closing </body> tag):

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=YOUR-PROFILE-ID"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
$(function() {
    var delay = 400;
    
    function hideMenu() {
        if (!$('.custom_button').data('in') && !$('.hover_menu').data('in') && !$('.hover_menu').data('hidden')) {
            $('.hover_menu').fadeOut('fast');
            $('.custom_button').removeClass('active');
            $('.hover_menu').data('hidden', true);
        }
    }
    
    $('.custom_button, .hover_menu').mouseenter(function() {
        $('.hover_menu').fadeIn('fast');
        $('.custom_button').addClass('active');
        $(this).data('in', true);
        $('.hover_menu').data('hidden', false);
    }).mouseleave(function() {
        $(this).data('in', false);
        setTimeout(hideMenu, delay);
    });    
    
});
</script>

Important: For '#pubid=YOUR-PROFILE-ID' above, change 'YOUR-PROFILE-ID' to your Profile ID if you want analytics data to be collected. If you do not want analytics, this phrase can be removed.

For more information about customizing the AddThis toolbox, please checkout the Rendering Link Decoration section of the Client API. We also have the complete list of Services, which might come in handy.