Slide-out Ads with jQuery

by artoodetoo

HTML

<dl class="slideout">
    <dt>
        Recomended for you
    </dt>
    <dd>
        <p class="item"><a href="#"><img src="http://farm8.staticflickr.com/7177/6974820331_9c49cecb90_s.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></p>
        <p class="item"><a href="#"><img src="http://farm4.staticflickr.com/3407/3652913812_1eecc4d148_s.jpg" />Nulla sem leo, vestibulum vitae convallis non, dignissim eget nunc.</a></p>
        <a class="more" href="#more">powered by VIRURL</a>
    </dd>
</dl>

<div class="stream">
<div class="sidebar">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    <p>Mauris nec nisi leo, at rutrum nulla. 
    <p>Sed lectus sem, sodales sit amet suscipit quis, euismod ut lorem. 
    <p>Pellentesque dapibus tempus est, a elementum magna viverra vel. 
    <p>Integer nec placerat nisi. 
    <p>Aliquam non magna erat, in luctus leo. 
    <p>Nullam sed augue justo, quis cursus est. 
    <p>In lectus ligula, tempor sed dapibus nec, lacinia id est. 
    <p>Donec elementum erat sit amet nisl facilisis malesuada tincidunt arcu varius. 
    <p>Sed malesuada interdum aliquam. 
    <p>Nunc molestie nisi ac sapien ultricies id placerat justo euismod. 
</div>
<div class="main">
    <h2>Matterhorn : The Window</h2>
    <a href="#" title="Matterhorn : The Window by fischerfotografie.nl, on Flickr"><img src="http://farm7.staticflickr.com/6012/6005946672_8c949383de.jpg" width="500" height="333" alt="Matterhorn : The Window"></a>
</div>
</div>

CSS

<style>
.stream {
    position: relative;
    overflow: hidden;
}
.main {
    background-color: #f1f1f1;
}
.sidebar {
    background-color: #fff;
    float: right;
    width: 320px;
    padding-left: 20px;
}

dl.slideout {
    height:25px; 
    position:fixed; 
    z-index:100; 
    bottom:0; 
    right:0;
    overflow:hidden; 
    width:320px; 
    padding:0; 
    margin:0; 
    background-color: #fff;
    cursor:default;
    -webkit-transition: height 0.25s ease-in-out;
    -moz-transition: height 0.25s ease-in-out;
    -o-transition: height 0.25s ease-in-out;
    transition: height 0.25s ease-in-out;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    box-shadow: #999 0 0 10px;
}
dl.slideout dt {
    border-left: 1px solid #000; border-top: 1px solid #000; border-radius: 5px 0 0 0;
    height:25px; 
    padding:0 10px; margin:0; 
    font:12px/25px arial, sans-serif; color:#000;
    text-transform: uppercase;
    font-weight: bold;
}
dl.slideout dd {
    border-left: 1px solid #000; 
    height:110px;
    padding:5px 5px 45px 10px; margin:0; font:12px/18px arial, sans-serif; color:#000;
}
dl.slideout dd a.more {position:absolute; text-decoration:none; right:10px; top:145px; color:#999;}
dl.slideout_hover {height:165px;}

dl.slideout p.item {margin: 0; padding: 0;}
dl.slideout p.item a {display: block; position: relative; overflow: hidden; text-decoration:none; font-weight: bold; color:#004;}
dl.slideout p.item a:hover {background-color: #ddd;}

dl.slideout img {border:0; width: 48px; height: 48px; float: left; clear: left; margin: 0 5px 5px 0;}

JavaScript

function mouseenter()
{
    $(this).addClass('slideout_hover');
}
function mouseleave(it)
{
    $(this).removeClass('slideout_hover');
}
$('.slideout').hover(mouseenter, mouseleave);