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="https://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 senin düşüncelerini merak ediyor. Bir yorum yaz

  1. Yazık dedi ki:

    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 dedi ki:

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