NICE MENU INFO SLIDER

Horizontally slide elements by hovering a box

by Ryan Brackett

HTML

<div id="niceSlider">
    
    <div id="niceMenu">
        
        <ul>
            <li><img src="http://dummyimage.com/460x280/cf5/fff"/> Description 1<br>Additional line</li>
            <li><img src="http://dummyimage.com/460x280/ad4/fff"/> Description 2<br>Additional line</li>
            <li><img src="http://dummyimage.com/460x280/d27/fff"/> Description 3</li>
            <li><img src="http://dummyimage.com/460x280/1a8/fff"/> Description 4</li>
            <li><img src="http://dummyimage.com/460x280/7a2/fff"/> Description 5<br>Additional line</li>            
        </ul>
        
    </div>
    
    <div id="imgSlider"><div id="imgHolder"></div></div>
    
</div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  *{margin:0;padding:0;}
  body{
    background:#eee;
    font-family:'Trebuchet MS';
}
#niceSlider{
    color:#ccc;
    font-size:12px;
    font-weight:bold;
    background:#444;
    position:relative;
    margin:0 auto;
    width:100%;
    height:280px;
}

#niceMenu{
    position:absolute;
    right:0px;
    width:20%;
    height:280px;
}

#niceMenu ul li{
    color:#666;
    background:#000;
    width:100%;
    height:36px;
    padding:10px 12px;
    list-style:none;
    
}
#niceMenu ul li:hover, #niceMenu ul li.hovered{
    color:#fff;
    background:#34C0f3;
}
#imgSlider{
    position:relative;
    overflow:hidden;
    height:280px;
    width: 80%;
    background:#fff;
}
img.thumb{
    width:30px;
    height:30px;
    border:2px solid #333;
    float:left;
    margin-right:6px;
}
#imgHolder{
    position:absolute;
    top:0px;
    left:0px;
}
#imgHolder img{
    position:relative;
    float:left;
}

JavaScript

$('#niceMenu ul li>img').clone().appendTo('#imgHolder');
$('#niceMenu img').addClass('thumb');
$('#niceMenu li:eq(0)').addClass('hovered');

$('#niceMenu li').mouseenter(function(){
    var imgSliderW = $('#imgSlider').width();
    $('#imgHolder').width( imgSliderW * ($('#imgHolder img').length) );
    $(this).addClass('hovered').siblings().removeClass('hovered');
    var liIndex = $(this).index();
    $('#imgHolder').animate({left: '-'+ imgSliderW * liIndex +'px'}, {queue:false, duration: 800});
});