Menu Navigasi Rolling Door Style

proBlogiz

---

Rolling Door Menu Style 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 dahulu DEMOnya :

DEMO ROLLING DOOR STYLE MENU 

Menu navigasi keren tersebut sebenarnya saya adop dan saya sharing kembali dari tutorial aslinya di css-tricks.com dengan judul Garage Door Style Menu. Dengan harapan sobat Blogger dapat juga menikmati menu unik ini dan berguna untuk memberi sentuhan baru di blog Anda.

Langkah Membuat Menu Nav Rolling Door

1. Mempersiapkan Gambar

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.

Contoh gambar yang telah disediakan:

Background Menu

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:

Masing-masing menu akan mempunyai pintu sendiri, seperti menu ular akan masuk ke pintu Reptiles. Anda bisa membuatnya yang lain dengan Photoshop, dengan ukuran masing-masing 200 x 100 px.

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.

2. HTML Markup

Nah sekarang kita mulai menulis kode HTML untuk memberikan link-link URL pada menu diatas. Markup HTML cukup sederhana, namun harus semantik dan bersih, seperti beikut:

<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>

ID pada menu akan memberi semua spesifikasi yang kita butuhkan, juga setiap item menu dapat memiliki gambar grafis pintu masing-masing, jadi kita akan menggunakannya sebagai hook.

3. CSS3 dan jQuery

Cara yang paling baik untuk mencapai teknik seperti demo menu diatas, adalah dengan menggunakan CSS3 dimana telah didukung dan fallback dengan metode JavaScript. Penggunaan "modernize enable"! sangat membantu, Modernizr adalah JavaScript library yang dapat membantu menangani masalah browser handle, khusunya csstransitions.
Pada code CSS akan dikombinasi dengan jQuery, hal ini untuk memastikan browser yang tidak mendukung transisi akan melakukan jQuery-based fallback dan hanya jika diperlukan saja.

So, ga usah bingung Sob, nanti kode CSS keseluruhan sudah disediakan.

CSS3 kode :

<style>
* { margin: 0; padding: 0; }
#garagedoor {
 margin: 10px auto;
 list-style: none;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUeGuroqVTjSCrzVM2wjJxAeVVbUDYS3PajpYW3sMWt4YybG2ZItVhTLnWnHhYFCtm0vQBFgKCwp0_ciqOdPw8KRPwemw20JeVjF-cRnAjBiKTVuXusbiEc5EIL7bNHiK-DkTVS4ICjX6j/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5d6dELnazn-oEZkNRabHVftPmYiKkDySl3ktb6Z_hcBTT9C6yBG6cARPYuez_Jh6gHzfQ2nFpjyW4B56kN8gJrLiuAGd2V-kYFmvnaJeHlXZhYvBkpOR4G5QPekbFdQ7IWkpZn2hBW9Zu/s1600/shutter-africanplains.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter2 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkjydR4LV5c6M3eQclt39w7Ro4RUlUKKcX4vVHJ69Xs7fumGkL0GDS53biKQl3mlZFosPdaPFBvaWultpwHMzSWQwvmToqRl88RcPFhrK6WogxuC4-uVd0gQu1dQ904nPtzbf-w6MBOMb/s1600/shutter-reptiles.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter3 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qe1ptRbUFa5bjEVzcvIVXKgdW3E057ZBzeSAflbm66kFLPRw-MRqPPaSEVCS3IHxrJin3f39LhSshKs_lqi0AFU394pHCkIXGWZorebzVZp-y6h18cBTnHl-vUU0FAIZlZYZKHX2TDOj/s1600/shutter-aviary.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter4 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-TgUu8phDUaN091foy6TJ-xmidl6vlP9Fu7NFz-LjC-0djurxwqpK249cNbIxnjeBgfXg-tNjzmKVLNBWLJPEHSd4arOuktTHBYZN_TKw7gg0xsFgK9WG497u0P582ri76Bjh1DzeBhO/s1600/shutter-arcticzone.jpg) 0 0 no-repeat; 
}
#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOa9ipHXDsPQloroNuf_cqx-P41rpsxl3rLb6_uyqmmP7H2G8zfouT_wq1Oj8RwC_SPwl1mjQ1blRWd897osG2XRMVgOOOlo-II-4OHeA6tG2ViTcox17rZqsvXI-1EppiWBDEziF9vSB/s1600/window.png) no-repeat bottom center;
   text-indent: -9999px;
}
</style>

note: 

• kode yang berwarna merah adalah URL gambar-gambar
• lebar keseluruhan menu adalah 800 px (width: 800px;)
• dan pintu menu 200 x 100 px

4. Javascript dan jQuery

Kita memerlukan Javascirpt modernizr-1.5.min.js untuk animasi dan transisi effect dan jQuery background position script, jadi ada dua script yang akan kita tempatkan bersama-sama sebagai widget menu rolling door ini.

<script src="https://problogizjs.googlecode.com/files/modernizr-1.5.min.js"></script>
<script src="https://problogizjs.googlecode.com/files/jquery.backgroundPosition.js"></script>

Final Kode HTML+ CSS + Js keseluruhan akan menjadi seperti berikut:

<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="https://problogizjs.googlecode.com/files/modernizr-1.5.min.js"></script>
<script src="https://problogizjs.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUeGuroqVTjSCrzVM2wjJxAeVVbUDYS3PajpYW3sMWt4YybG2ZItVhTLnWnHhYFCtm0vQBFgKCwp0_ciqOdPw8KRPwemw20JeVjF-cRnAjBiKTVuXusbiEc5EIL7bNHiK-DkTVS4ICjX6j/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5d6dELnazn-oEZkNRabHVftPmYiKkDySl3ktb6Z_hcBTT9C6yBG6cARPYuez_Jh6gHzfQ2nFpjyW4B56kN8gJrLiuAGd2V-kYFmvnaJeHlXZhYvBkpOR4G5QPekbFdQ7IWkpZn2hBW9Zu/s1600/shutter-africanplains.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter2 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOkjydR4LV5c6M3eQclt39w7Ro4RUlUKKcX4vVHJ69Xs7fumGkL0GDS53biKQl3mlZFosPdaPFBvaWultpwHMzSWQwvmToqRl88RcPFhrK6WogxuC4-uVd0gQu1dQ904nPtzbf-w6MBOMb/s1600/shutter-reptiles.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter3 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_qe1ptRbUFa5bjEVzcvIVXKgdW3E057ZBzeSAflbm66kFLPRw-MRqPPaSEVCS3IHxrJin3f39LhSshKs_lqi0AFU394pHCkIXGWZorebzVZp-y6h18cBTnHl-vUU0FAIZlZYZKHX2TDOj/s1600/shutter-aviary.jpg) 0 0 no-repeat; 
}
#garagedoor li#shutter4 {
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-TgUu8phDUaN091foy6TJ-xmidl6vlP9Fu7NFz-LjC-0djurxwqpK249cNbIxnjeBgfXg-tNjzmKVLNBWLJPEHSd4arOuktTHBYZN_TKw7gg0xsFgK9WG497u0P582ri76Bjh1DzeBhO/s1600/shutter-arcticzone.jpg) 0 0 no-repeat; 
}
#garagedoor a {
   width: 200px;
   height: 100px;
   display: block;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOa9ipHXDsPQloroNuf_cqx-P41rpsxl3rLb6_uyqmmP7H2G8zfouT_wq1Oj8RwC_SPwl1mjQ1blRWd897osG2XRMVgOOOlo-II-4OHeA6tG2ViTcox17rZqsvXI-1EppiWBDEziF9vSB/s1600/window.png) no-repeat bottom center;
   text-indent: -9999px;
}
</style>

Copy semua kode diatas dan gunakan sebagai widget Menu Navigasi Rolling Door pada blog Anda. Letakkan widget tersebut tepat dibawah Header atau Judul Blog kamu.

Browser Support
Menu Pintu Garasi ( Rolling Door Menu) ini bekerja baik dengan pada Chrome, Firefox 4+. Pada IE akan maksimal dengan IE 10+ dan Opera 11.6 +.

Catatan Tambahan:

Menu ini juga akan berhasil dan tidak crash jika template Anda sudah menggunakan jQuery1.2.6 atau jQuery1.6.1 atau 1.6.2  dan jQuery 1.5.2 atau jQuery versi 1.8.3. Ini berdasarkan test yang telah saya lakukan dibeberapa template berbeda. Mungkin akan crash pada jQuery versi lain namun saya belum mencobanya, Selamat Mencoba Kawan semoga berhasil:)

So Enjoy it Sobat:)