Slide-out Ads

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>
      <p>Mauris nec nisi leo, at rutrum nulla.</p>
        <p>Sed lectus sem, sodales sit amet suscipit quis, euismod ut lorem.</p>
          <p>Pellentesque dapibus tempus est, a elementum magna viverra vel.</p>
            <p>Integer nec placerat nisi.</p>
              <p>Aliquam non magna erat, in luctus leo.</p>
                <p>Nullam sed augue justo, quis cursus est.</p>
                  <p>In lectus ligula, tempor sed dapibus nec, lacinia id est.</p>
                    <p>Donec elementum erat sit amet nisl facilisis malesuada tincidunt arcu
                      varius.</p>
                      <p>Sed malesuada interdum aliquam.</p>
                        <p>Nunc molestie nisi ac sapien ultricies id placerat justo euismod.</p>
                          
  </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

.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

/* No Javascipt here */