Kilometro6
Related Posts Slide Outs
Related Posts Slide Outs
Este es un buen menu vertical deslizable, realizado con CSS3 y Jquery, que podrán utilizar, por ejemplo, para mostrar las últimas entradas de su web, el contenido destacado, etc.
Este código va en Texto por encima de la página:
Este código va en Texto por encima de la página:
<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Beautiful Background Image Navigation</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/BeautifulBackgroundImageNavigation.zip">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome Bubble Navigation with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/BubbleNavigation/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Stunning Circular Motion Effect with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CircularPortfolio/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Fresh Set of CSS-only Menus</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/01/31/fresh-set-of-css-only-menus/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/CSSonlyMenus/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Fresh Sliding Thumbnails Gallery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/FreshSlidingThumbnailsGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">A jQuery Heat Map</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/08/a-jquery-heat-map/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/jQueryHeatMap/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">jTextTranslate: A jQuery Translation Plugin</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2009/11/30/jtexttranslate-a-jquery-translation-plugin/">Article</a>
<a target="_blank" href="http://tympanus.net/jTextTranslate/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome Mobile Image Gallery Web App</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/WonderwallMobileGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome CSS3 & jQuery Slide Out Button</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/SlideOutButton/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Beautiful Slide Out Navigation</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/FixedNavigationTutorial/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Neat Photo Hover Effect with CSS Sprites and jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/22/neat-photo-hover-effect-with-css-sprites-and-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Development/PhotoEffect/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Beautiful Photo Stack Gallery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/PhotoStack/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Pimp Your Tables with CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CSS3Tables/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Scrolling to the Top and Bottom with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/01/03/scrolling-to-the-top-and-bottom-with-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/scrollupdown/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome Cufonized Fly-out Menu</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CufonizedFlyOutMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Minimalistic Slideshow Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Interactive Photo Desk with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/">Article</a>
<a target="_blank" href="http://tympanus.net/Development/PhotoDesk/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Sliding Panel Photo Wall Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Slide Down Box Menu with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/SlideDownBoxMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Multimedia Gallery for Images, Video and Audio</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/24/multimedia-gallery/">Article</a>
<a target="_blank" href="http://tympanus.net/Development/MultiMediaGallery/">Demo</a>
</span>
</div>
</li>
</ul>
<span id="rp_shuffle" class="rp_shuffle">
</span>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;
/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
</script>
<ul>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Beautiful Background Image Navigation</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/05/beautiful-background-image-navigation-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/BeautifulBackgroundImageNavigation.zip">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome Bubble Navigation with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/04/29/awesome-bubble-navigation-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/BubbleNavigation/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Stunning Circular Motion Effect with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/07/stunning-circular-motion-effect/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CircularPortfolio/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Fresh Set of CSS-only Menus</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/01/31/fresh-set-of-css-only-menus/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/CSSonlyMenus/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Fresh Sliding Thumbnails Gallery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/23/fresh-sliding-thumbnails-gallery-with-jquery-php/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/FreshSlidingThumbnailsGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">A jQuery Heat Map</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/08/a-jquery-heat-map/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/jQueryHeatMap/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">jTextTranslate: A jQuery Translation Plugin</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2009/11/30/jtexttranslate-a-jquery-translation-plugin/">Article</a>
<a target="_blank" href="http://tympanus.net/jTextTranslate/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome Mobile Image Gallery Web App</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/27/awesome-mobile-image-gallery-web-app/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/WonderwallMobileGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome CSS3 & jQuery Slide Out Button</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/08/awesome-css3-jquery-slide-out-button/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Tutorials/SlideOutButton/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Beautiful Slide Out Navigation</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/FixedNavigationTutorial/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Neat Photo Hover Effect with CSS Sprites and jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/02/22/neat-photo-hover-effect-with-css-sprites-and-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/Development/PhotoEffect/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Beautiful Photo Stack Gallery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/27/beautiful-photo-stack-gallery-with-jquery-and-css3/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/PhotoStack/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Pimp Your Tables with CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/03/pimp-your-tables-with-css3/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CSS3Tables/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Scrolling to the Top and Bottom with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/01/03/scrolling-to-the-top-and-bottom-with-jquery/">Article</a>
<a target="_blank" href="http://www.tympanus.net/scrollupdown/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Awesome Cufonized Fly-out Menu</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/28/awesome-cufonized-fly-out-menu/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/CufonizedFlyOutMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Minimalistic Slideshow Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Interactive Photo Desk with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/01/interactive-photo-desk/">Article</a>
<a target="_blank" href="http://tympanus.net/Development/PhotoDesk/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Sliding Panel Photo Wall Gallery with jQuery</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Slide Down Box Menu with jQuery and CSS3</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/">Article</a>
<a target="_blank" href="http://tympanus.net/Tutorials/SlideDownBoxMenu/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/k/kilometro6-pruebas/img.png" alt=""/>
<span class="rp_title">Multimedia Gallery for Images, Video and Audio</span>
<span class="rp_links">
<a target="_blank" href="http://tympanus.net/codrops/2010/06/24/multimedia-gallery/">Article</a>
<a target="_blank" href="http://tympanus.net/Development/MultiMediaGallery/">Demo</a>
</span>
</div>
</li>
</ul>
<span id="rp_shuffle" class="rp_shuffle">
</span>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function() {
/**
* the list of posts
*/
var $list = $('#rp_list ul');
/**
* number of related posts
*/
var elems_cnt = $list.children().length;
/**
* show the first set of posts.
* 200 is the initial left margin for the list elements
*/
load(200);
function load(initial){
$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
var loaded = 0;
//show 5 random posts from all the ones in the list.
//Make sure not to repeat
while(loaded < 5){
var r = Math.floor(Math.random()*elems_cnt);
var $elem = $list.find('li:nth-child('+ (r+1) +')');
if($elem.is(':visible'))
continue;
else
$elem.show();
++loaded;
}
//animate them
var d = 200;
$list.find('li:visible div').each(function(){
$(this).stop().animate({
'marginLeft':'-50px'
},d += 100);
});
}
/**
* hovering over the list elements makes them slide out
*/
$list.find('li:visible').live('mouseenter',function () {
$(this).find('div').stop().animate({
'marginLeft':'-220px'
},200);
}).live('mouseleave',function () {
$(this).find('div').stop().animate({
'marginLeft':'-50px'
},200);
});
/**
* when clicking the shuffle button,
* show 5 random posts
*/
$('#rp_shuffle').unbind('click')
.bind('click',shuffle)
.stop()
.animate({'margin-left':'-18px'},700);
function shuffle(){
$list.find('li:visible div').stop().animate({
'marginLeft':'60px'
},200,function(){
load(-60);
});
}
});
</script>
Este va en CSS-Code:
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
z-index: 2;
}
span.rp_shuffle{
background:#222 url(https://img.webme.com/pic/k/kilometro6-pruebas/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul{
margin:0;
padding:0;
list-style:none;
}
.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;
}
.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}
span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
}
span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(https://img.webme.com/pic/k/kilometro6-pruebas/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}
#webme_sky_ad {
position: absolute;
left: 5px;
top: 0px;
z-index: 1;
}
table[height ="102"] {
position: relative;
top:10px;
left:400px;
}
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
z-index: 2;
}
span.rp_shuffle{
background:#222 url(https://img.webme.com/pic/k/kilometro6-pruebas/shuffle.png) no-repeat 10px 50%;
width:28px;
height:14px;
display:block;
margin:10px 0px 0px 20px;
cursor:pointer;
padding:4px;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul{
margin:0;
padding:0;
list-style:none;
}
.rp_list ul li{
width: 240px;
margin-bottom:5px;
display:none;
}
.rp_list ul li div{
display: block;
line-height:15px;
width: 240px;
height: 80px;
background:#333;
border:1px solid #000;
-moz-border-radius:5px 0px 0px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.rp_list ul li div img{
width:70px;
border:none;
float:left;
margin:4px 10px 0px 4px;
border:1px solid #111;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
}
span.rp_title{
font-size:11px;
color:#ddd;
height:46px;
margin:4px 0px 0px 20px;
display:block;
text-shadow:1px 1px 1px #000;
padding-top:3px;
background:#222;
-moz-box-shadow:0px 0px 5px #000 inset;
-webkit-box-shadow:0px 0px 5px #000 inset;
box-shadow:0px 0px 5px #000 inset;
}
span.rp_links{
width:195px;
height:8px;
padding-top:2px;
display:block;
margin-left:42px;
}
span.rp_links a{
background: #222 url(https://img.webme.com/pic/k/kilometro6-pruebas/bgbutton.png) repeat-x;
padding: 2px 18px;
font-size:10px;
color: #fff;
text-decoration: none;
line-height: 1;
-moz-box-shadow: 0 1px 3px #000;
-webkit-box-shadow: 0 1px 3px #000;
box-shadow:0 1px 3px #000;
text-shadow: 0 -1px 1px #222;
cursor: pointer;
outline:none;
}
span.rp_links a:hover{
background-color:#000;
color:#fff;
}
#webme_sky_ad {
position: absolute;
left: 5px;
top: 0px;
z-index: 1;
}
table[height ="102"] {
position: relative;
top:10px;
left:400px;
}
Debido a que el menu interfería con la publicidad horizontal derecha de PWG, tuve que cambiarla de lugar y, como consecuencia de eso, también modificar la publicidad horizontal.
Puedes ver un ejemplo aqui.
Cualquier pregunta puedes hacerla en nuestra Seccion de Soporte
Hoy hemos ayudado a 19 visitantes (24 clics a subpáginas) en kilometro6!