Sliding Tag

An animated sliding tag.

by Travis

HTML

<h1>CSS3 Category Sliders</h1>
<p>Inspired by <a href="http://365psd.com/day/2-213/" target="_blank">Sliding Tags</a>.</p>

<div class="category">
    <div class="text">Web Development</div>
    <div class="number">9001</div>
</div>
<div class="category">
    <div class="text">Gaming</div>
    <div class="number">34</div>
</div>
<div class="category">
    <div class="text">jQuery</div>
    <div class="number">210</div>
</div>
<div class="category">
    <div class="text">Android</div>
    <div class="number">5</div>
</div>

CSS

h1 {font-size:24px; line-height:1.5em;}
p {line-height:1.5em; margin:0px 0px 10px 0px;}

.category {margin:5px 5px 5px 0px; position:relative; float:left; overflow:hidden;}
.category:hover {cursor:pointer;}
.text {padding:4px 8px; background:#eee; border-radius:4px 0px 0px 4px; border:1px solid #ccc; border-right:1px solid #999; box-shadow:inset 0px 1px 0px #fff; float:left; position:relative; z-index:2;}
.number {margin:1px 0px 0px 0px; background:#F9A509; border:1px solid #999; border-left:0px; box-shadow:inset 0px 1px 0px #FFC322; padding:3px; display:block; float:left; position:relative; z-index:1;}

JavaScript

var measurement;

$(function() {
    
    // Set the default position
    $('.number').each(function(index){
        measurement = $(this).width() + 4;
        $(this).css('margin-left', '-' + measurement + 'px'); 
    });
    
    // Dynamically animate on hover.
    $('.text').hover(function() {
        measurement = $(this).parent().find(".number").width() + 4;
        $(this).siblings('.number').stop().animate({marginLeft: '0px'}, 300);
    }, function() {
        measurement = $(this).parent().find(".number").width() + 4;
        $(this).siblings('.number').stop().animate({marginLeft: '-' + measurement + 'px'}, 300);
    });
    
});