hibycocuk
hibycocuk
CSS3kutularslayt
JQuery ve CSS3 kutular Out slayt
Yazar: Emre Çördükler | Yayın Tarihi: 01 Şubat 2011 | Yorum Kategori: Css Htm jQuery Menü
CSS
.rp_list {
font-family:Verdana, Helvetica, sans-serif;
position:fixed;
right:-220px;
top:40px;
margin:0;
padding:0;
}
span.rp_shuffle{
background:#222 url(https://img.webme.com/pic/h/hibycocuk/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/h/hibycocuk/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;
} <script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<div class="shuffle"></div>
<div class="hover"></div>
</div>
<div id="rp_list" class="rp_list">
<ul>
<li>
<div>
<img src="https://img.webme.com/pic/h/hibycocuk/1.jpg" 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/">Demo</a>
</span>
</div>
</li>
<li>
<div>
<img src="https://img.webme.com/pic/h/hibycocuk/2.jpg" 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/h/hibycocuk/3.jpg" 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/h/hibycocuk/4.jpg" 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/h/hibycocuk/5.jpg" 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/h/hibycocuk/6.jpg" 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/h/hibycocuk/7.jpg" 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/h/hibycocuk/8.jpg" 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/h/hibycocuk/13.jpg" 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/h/hibycocuk/14.jpg" 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/h/hibycocuk/9.jpg" 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/h/hibycocuk/10.jpg" 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/h/hibycocuk/11.jpg" 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/h/hibycocuk/12.jpg" 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/h/hibycocuk/15.jpg" 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/h/hibycocuk/16.jpg" 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/h/hibycocuk/17.jpg" 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/h/hibycocuk/18.jpg" 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/h/hibycocuk/19.jpg" 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/h/hibycocuk/20.jpg" 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>
</body>
</html>
Önizlemesi (JQuery ve CSS3 kutular Out slayt)
AJQery ve CSS3 Kutular Out Slayt Şifre: hibycocuk.tr.gg
Yardım isteklerinizi lütfen yorumlar kısmına yazmayın. İletişim formundan bana ulaşabilirsiniz.
