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>
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;
}
Download butonunda stil dosyası mevcuttur. İstediğiniz kodlara oradan ulaşabilirsiniz.