Garage Door

18Okunma
2 yorum

Garage

Css-Tricks sitesinin  jquery, modernizr-1.5.min.js  ve  birazda  Css3 kullanarak  hazırladığı  çok  güzel  ve bir  o kadarda  kullanışlı  menü  örneği.  Garaj  kapısı  tarzı ( gerçi güzel  ülkemde  pek  öyle  otomatik garajlara  denk gelmedim daha, genellikle biz  insan gücünden tamamiyle  faydalandığımız için daha çok manuel  garaj kapıları kullanıyoruz  )  açılıp kapanabilen özellikte. Açıklama  yukarı  çıkınca  açıklamanın resmi  ortaya  çıkıyor.

 

Kullanım :

  • Head  etiketleri  arasına eklenecek olan kısım.

Js ve stil dosyaları : 

<link href="css/style.css" rel="stylesheet">
<script src="js/modernizr-1.5.min.js"></script>

Javascript:

<script>
		var jQueryScriptOutputted = false;
		function initJQuery() {
		    if (typeof(jQuery) == 'undefined') {
		        if (!jQueryScriptOutputted) {
		            jQueryScriptOutputted = true;
		            // Primitive way of loading scripts (no library yet)
		            document.write("<scr" + "ipt src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></scr" + "ipt>");
		        }
		        setTimeout("initJQuery()", 50);
		    } else {
		    	// jQuery way of loading scripts
		    	$.getScript('js/jquery.backgroundPosition.js', function() {
		    		// Just for demo
		    		$("h2").text('This Browser is using a jQuery fallback for this effect.');
		            // Set CSS in Firefox (Required to use the backgroundPosition js)
					$('#shutter1').css({backgroundPosition: '0px 0px'});
					$('#shutter2').css({backgroundPosition: '0px 0px'});
					$('#shutter3').css({backgroundPosition: '0px 0px'});
					$('#shutter4').css({backgroundPosition: '0px 0px'});
					// Animate the Shutter  
					$("#garagedoor a").hover(function() {	
					      $(this).parent().stop().animate({backgroundPosition: '(0px -100px)'}, 500);
					    }, function() {
					      $(this).parent().stop().animate({backgroundPosition: '(0px 0px)'}, 500);
					});
		    	});
		    }
		}
		if (!Modernizr.csstransitions) {
			initJQuery();
		}
	</script>
  •  Body etiketleri  arasına eklenecek olan kısım.

Html :

<ul id="garagedoor">
		<li id="shutter1"><a href="#1">Link 1</a></li>
		<li id="shutter2"><a href="#2">Link 2</a></li>
		<li id="shutter3"><a href="#3">Link 3</a></li>
		<li id="shutter4"><a href="#4">Link 4</a></li>
</ul>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-07 tarihinde yayınlandı,Toplam 1847 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(2 yorum)
Yükleniyor...
Yazık Yorumcu LV.1
2015-06-01 00:41:45 回 Yanıtla

Alah aşkına hadi siteden faydalansın diye emek veriyorsunuz anladık güzel ama kodlar nerede?
Mesela aşağıdaki css kodları????????????????????????????????????

* { margin: 0; padding: 0; }
body { background:#c1c1c1; }
a { outline: 0; }
h1 { text-align: center; margin: 0 auto; font: bold 32px Helvetica, Arial, Sans-Serif; margin: 70px auto 10px; letter-spacing: -1px; }
h2 { text-align: center; padding: 5px; margin: 10px; background: #fff2b6; color: #398138; }

#garagedoor {
margin: 10px auto;
list-style: none;
background: url(../images/menu-bg.jpg) no-repeat;
width: 800px;
overflow: auto;
}
#garagedoor li {
width: 200px;
height: 100px;
display: block;
float: left;
}

/* Modernizer Enabled */
.csstransitions #garagedoor li {
-webkit-transition: background-position 0.6s ease;
-moz-transition: background-position 0.6s ease;
-o-transition-property: background-position 0.6s ease;
}
.csstransitions #garagedoor li:hover {
background-position: 0 -100px !important;
}

#garagedoor li#shutter1 {
background: url(../images/shutter-africanplains.jpg) 0 0 no-repeat;
}
#garagedoor li#shutter2 {
background: url(../images/shutter-reptiles.jpg) 0 0 no-repeat;
}
#garagedoor li#shutter3 {
background: url(../images/shutter-aviary.jpg) 0 0 no-repeat;
}
#garagedoor li#shutter4 {
background: url(../images/shutter-arcticzone.jpg) 0 0 no-repeat;
}
#garagedoor a {
width: 200px;
height: 100px;
display: block;
background: url(../images/window.png) no-repeat bottom center;
text-indent: -9999px;
}

    Ali Blogger
    2015-06-17 23:57:33 回 Yanıtla

    @Yazık Download butonunda stil dosyası mevcuttur. İstediğiniz kodlara oradan ulaşabilirsiniz.