Menu navigasi Bergaya Rolling Door

R

olling Door Menu atau Menu Pintu Garasi adalah sebuah menu navigasi dengan gaya seperti pintu rolling door (pintu garasi) di mana gambar "pintu" akan menggeser keatas (slide up) saat mouse diatasnya (hover) dan membuka sesuatu di baliknya. Desain menu navigasi ini akan dibuat dengan CSS3, dan dengan jQuery. Kemudian kita akan menggabungkan keduanya untuk menghasilkan menu navigasi yang cantik dan unik, Menu Navigasi Rolling Door. Ok kita langsung saja lihat live DEMOnya pada menu blog ini atau lihat pada gambar dibawah ini: Menu navigasi rolling door tersebut ditulis oleh CSSTRICK.COM,Disini akan diperlukan tiga macam gambar yang berbeda, pertama adalah gambar untuk seluruh background menunya sendiri. Anda dapat membuatnya sendiri gambar atau image yang dibutuhkan dengan Photoshop atau Corel. Gambar ini nantinya digunakan latarbelakang menu, yang akan nampak setelah door (pintu) terbuka.dan inilah contoh gambar yang telah disediakan oleh csstrick.com, Gambar diatas menggunakan file JPeg, dengan lebar 800 px dan tinggi 100 px, tentu Anda dapat merubahnya sesuai blog. Dan juga menggunakan CSS Sprite agar lebih ringan dan menghemat permintaan HTTP. Yang kedua adalah membuat gambar untuk pintu garasinya (rolling door) itu sendiri, yang akan kita sebut dengan nama "shutter" atau jendela. Ini dibuat terpisah dan masing-masing gambar menu dengan pintu yang berbeda pula. Contoh pintu sebagai berikut: Terakhir, kita juga akan membuat sebuah jendela yang akan bertindak sebagai kerangka (frame) garasi. Ini akan terlihat unik, seuntuhan akan nampak indah seperti pintu rolling door saat animasi (hover). Tentu Anda juga sudah melihatnya di DEMO diatas bukan? Frame untuk garasi akan seperti ini jadinya : Buatlah ukuran dimension untuk kerangka window diatas menjadi 200 x 103 px, dengan type PNG file. Nah selanjutnya sobat cukup mengcopy paste kode berikut ini dan pastekan melalui add gadget, pilihlah yang dibawah header

Kode CSS DAN JAVASCRIPT

<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>
<script src='http://bodoh.googlecode.com/files/modernizr-1.5.min.js'></script>
<script src='http://bodoh.googlecode.com/files/jquery.backgroundPosition.js'></script> 

<style>
* { margin: 0; padding: 0; }
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(http://4.bp.blogspot.com/-vkV8RyB52vA/UXu2O_5I28I/AAAAAAAAHlY/Yw_79TOWuCk/s1600/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(http://4.bp.blogspot.com/-I3qadYXXOl4/UXv1ZJCXPNI/AAAAAAAAHlo/XppysHeogOk/s1600/shutter-africanplains.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter2 {
 background: url(http://3.bp.blogspot.com/-mQoa-7bGcF4/UXv1aTetCLI/AAAAAAAAHmA/f0hk6XJfuXA/s1600/shutter-reptiles.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter3 {
 background: url(http://2.bp.blogspot.com/-ZZOrDwUzbqk/UXv1Zc7-RMI/AAAAAAAAHlw/pwtv2p1LWPk/s1600/shutter-aviary.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter4 {
 background: url(http://2.bp.blogspot.com/-x6WCwi7tiog/UXv1Znm693I/AAAAAAAAHls/mOHIbWtDwUM/s1600/shutter-arcticzone.jpg) 0 0 no-repeat; 
}
#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(http://3.bp.blogspot.com/-Kcgebh3q8xI/UXw8DeoZB5I/AAAAAAAAHms/XYuqm7wj28E/s1600/window.png) no-repeat bottom center;
   text-indent: -9999px;
}
</style>

Alamat URL gambar yang berwarna biru silahkan sobat ganti dengan url gambar yang telah sobat buatDemikian saja semoga bermanfaat..........