Social Nav for TC

A CSS-based alternative for the social nav bar.

by nate

HTML

<div class="bar">
    <div class="inner">
    </div>
    <div class="bottom">
    </div>
</div>

CSS

.bar {
    background-color: #666;
    border-bottom: 35px solid #fff;
    border-left: 1px solid #efefef;
    float: left;
    margin: 0 2em 2em;
    padding: 0;
    position: relative;
}

.bar .inner {
    background-color: #fff;
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    border-top: 1px solid #666;
    height: 150px;
    left: -1px;
    margin-left: -4px;
    position: relative;
    top: -1px;
    width: 20px;
}

.bar .bottom {
    border-bottom: transparent solid 4px;
    border-right: #666 solid 4px;
    bottom: -3px;
    left: -4px;
    position: absolute;
}

JavaScript

var openDelay,
    closeDelay,
    speed = 200;

$(function() {
    
    var $bar = $( '.bar' );
    
    $bar.bind( 'click', function() {
        var $this = $( this ),
            $inner = $this.children( '.inner' );
        
        clearTimeout( openDelay );
        clearTimeout( closeDelay );
        
        if ( ! $this.hasClass( 'expanded' ) ) {
             $inner.animate({
                 height: 200,
                 width: 150
             }, {
                 duration: speed
             });
            
            $this.addClass( 'expanded' );
            
        } else {
              $inner.animate({
                 height: 150,
                 width: 20
             }, {
                 duration: speed
             });
            
            $this.removeClass( 'expanded' );
        }
    });
    
    $bar.bind( 'mouseenter', function() {
        var $this = $( this );
        
        clearTimeout( openDelay );
        clearTimeout( closeDelay );
        
        openDelay = setTimeout( (function() { $this.trigger( 'click' ); }), 150 );
    });
    
    $bar.bind( 'mouseleave', function() {
        var $this = $( this );
        
        clearTimeout( openDelay );
        clearTimeout( closeDelay );
        
        closeDelay = setTimeout( (function() { $this.trigger( 'click' ); }), 1000 );
    });
            
});