Penting!! Sobat Blogger yang ingin re-post atau menulis kembali artikel kami diblog/website Anda, harap lihat halaman DISCLAIMER ( beberapa blog telah diproses di Google Removal Content ) Setiap tindakan pelanggaran hak cipta (COPAS) akan dilaporkan, TANPA pemberitahuan.


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 :

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:


Gambar Background Menu
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:

pintu menu african plains
pintu menu repltiles
pintu menu aviary
pintu menu arctic zone


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 :

frame window

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.

adding HTML and Javascript


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:)
Artikel Terkait Lainnya:
Click here for comments

12 komentar

Dari penjelasan agan Riza, yang sangat detail, kelihatan bahwa mas RIZA ini pintar sekali di 3 bahasa blogiz, HTML, JS,dan CSS. Habis baca post ini, seolah saya merasa akan bisa untuk memasang "Menu Navigasi Rolling Door Style " ini. Bener.,padahal saya ini kan masih pemula, beginner, Newbie, kok bisa-bisanya merasa sok akan bisa.Padahal nyoba wae yo durung. Structur postingnya, apik, urut, rinci. Ntar malam saya coba. Maturnuwun nggih mas RIZA..

REPLY

Kang Marlon selalu merendah aja, biasa para master seprti itu:)
saya cuman re-share aja mas:) Thanks to Chriscoyer
makasih sob:)

REPLY

selamat sore sobat, maaf baru berkunjung.
soalnya di warnet saya gak bisa domain blogspot.

jadi nunggu normal dehh..


jangan lupa komentar baliknya ya..

:D

REPLY

ok sob:) santai aja
thanks

REPLY

Wow....!!!hebat..Thanks..q hanya bs geleng2 kpla..Tengkiyu..
Tolong di cek bos di blog sy
www.46english.blogspot.com
Gmn Bosss?

REPLY

sy sdh mnggunakanx dblog sy...mas..Bs ga di cek...?tolong mas ya?
Trus kasih masukan.....???barangkali ada yang kurang pas..
ini blog saya mas...
www.46english.blogspot.com

REPLY

keren menu rollingnya sob:)

REPLY

Menu saya tdk akan kerren kalau sy tdk dpat dari Anda Mas Hriza Muh...!!!Trimakasih atas kunjunganya ke blog saya..
Sbetulnya saya masih 1 bulan kurang kenal dengan yg namaya blog..
Saya mengandalkan bahasa Inggris saya untuk mengedit dan momodifikasi semua yang saya dpat dari Internet..termasuk yg saya dapat dari Anda...Skali lagi tmaksih....
Smoga bemanfaat....dan Anda mndapatkan balsan yang stimpal...
Orang kalau ngasih satu maka ia akan mendapat ganti sepuluh kali lipat.
Amiiin..!!!!!
You are the best blogger that I know....!!!
Keep Blogging...!!!!!

REPLY

Itu menu baru aku dapat td malam..trus saya lagsung edit sampai jam 2 pagi...
Trimakasih Sungguh Lo Mas Hriza Muh.......

REPLY

terimakasih kembali mas John, senang bisa membantu sesama blogger:)
thanks doanya, amiiin

REPLY

Silahkan Berkomentar
Komentar/pertanyaan Sesuai Topik, Please NO SPAM, NO Promotion Links
Convert Kode HTML sebelum disisipkan

Convert

Google+ Followers

Submit email Anda, dapatkan update artikel:


Like Me

Artikel Terbaru

|Copyright © 2013| Problogiz |All Rights Reserved|