Cara Membuat Image Horizontal Scroller Menu

Image horizontal scrol menu yang kita maksud di sini adalah sebuah menu datar dengan tampilan gambar yang bergerak scrolling ketika mouse berada di tombol yang terpasang hiding. Menu ini sebelum di klik akan menampilkan gambar yang mengguling (scrolling) ke bawah secara perlahan lalu sesudah photo muncul secara utuh, akan ketahuan bagi pengunjung tentang link yang akan dituju jika akan diklik.

Menu ini adalah varian dari jenis menu scrolling, hanya saja yang membuat unik menu ini adalah penjelasan tentang isi link akan kita buat berdasarkan keterangan photo, bukan dengan teks seperti jamaknya.

Berikut ini adalah menu scrolling photo yang sama sekali menggunakan kode CSS tanpa hack javascript.

Menu seperti ini baik buat web yang mengedepankan photo artistik dan menu yang unik dan menarik. Jika ingin mengaplikasikan menu ini ke dalam blog, berikut ini adalah kodenya:

Langkah-langkah Membuat Menu Image Scroller Horizontal

Pertama, Kode CSS dari menu ini.

#kembang {width:600px; height:266px; margin:0 auto; border:1px solid #888; position:relative; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFCRk7ZIer2SaHfRWgCHH5Td2VJGsKNaFPR5RIzFSGZR4ywcgNuqCN5susMIb_rXDHpPV5AY0OV8wrOqVczk_GWMAs6x0Gn3UiSwgO12YBxQqo4wZh28ZdEybt0vJ35fqIy4SH6vuHAQ/s600/spa.jpg) no-repeat right top;}

div.mandi {float:left; background:transparent;float:left; width:38px; height:266px; margin-right:2px; display:inline;}

ul.outer {padding:0; margin:0; list-style:none;}

ul.outer ul {padding:0; margin:0; list-style:none;}

div.mandi a {text-decoration:none; color:#000;}

div.mandi table {border-collapse:collapse; padding:0; margin:-1px;}

ul.outer li {display:block; float:left; padding:14px 2px; margin:0;}

* html ul.outer li {padding:0;} /* for IE6 */

* html .mandi a.wrap {float:left; display:block; padding:14px 2px;} /* for IE6 */

ul.outer li.inner img {width:100%; display:block; border:0; cursor:pointer;}

ul.outer li:hover {padding:7px 1px;}

* html .mandi a:hover {padding:7px 1px;}

div.slide {left:120px; top:0; width:480px; height:0; overflow:hidden; position:absolute;}

div.contents1 {position:absolute; left:0; top:-266px; width:480px; height:266px;}

div.contents2 {position:absolute; left:0; bottom:-266px; width:480px; height:266px;}

div.mandi .p1:hover div.slide {height:266px;}

div.mandi .p1:hover div.contents1 {top:-230px;}

div.mandi .p2:hover div.contents1 {top:-195px;}

div.mandi .p3:hover div.contents1 {top:-160px;}

div.mandi .p4:hover div.contents1 {top:-125px;}

div.mandi .p5:hover div.contents1 {top:-90px;}

div.mandi .p6:hover div.contents1 {top:-60px;}

div.mandi .p7:hover div.contents1 {top:-30px;}

div.mandi .p8:hover div.contents1 {top:0px;}

div.mandi .p1:hover div.contents2 {bottom:-230px;}

div.mandi .p2:hover div.contents2 {bottom:-195px;}

div.mandi .p3:hover div.contents2 {bottom:-160px;}

div.mandi .p4:hover div.contents2 {bottom:-125px;}

div.mandi .p5:hover div.contents2 {bottom:-90px;}

div.mandi .p6:hover div.contents2 {bottom:-60px;}

div.mandi .p7:hover div.contents2 {bottom:-30px;}

div.mandi .p8:hover div.contents2 {bottom:0px;}

Masukkan kode CSS di atas kedalam CSS blog anda. Caranya, login ke blog, lalu klik >> element halaman >> Edit HTML. Sebelumnya save dulu template anda. Kemudian Kopi Paste semua kode CSS di atas kedalam CSS blog anda sebelum kode /skin.

Kemudian klik preview, jika tidak ada pesan error yang muncul, segera save template anda.

Kode HTML Kode ini adalah kode untuk isi tampilan menu. Sebagai berikut:

<div id="mandikembang">

<div id="kembang">

<div class="mandi">



<ul class="outer"><li class="p1">

<ul><li class="p2">

<ul><li class="p3">

<ul><li class="p4">

<ul><li class="p5">

<ul><li class="p6">

<ul><li class="p7">

<ul><li class="inner p8">

<a href="#url1"><img

src="http://1.bp.blogspot.com/-WO9z2uupN2g/TbmLu8q2zQI/AAAAAAAAAsg/hY9Litqe474/s400/blank.gif"

alt=""></a>

<div class="slide">

<div class="contents1">

<img src="http://1.bp.blogspot.com/-u1BeNULqu2Y/TbmLvTfMxoI/AAAAAAAAAsw/GNtHsXOfcOQ/s400/products.jpg"

alt="">

</div>

</div>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</div>

<div class="mandi">



<ul class="outer"><li class="p1">

<ul><li class="p2">

<ul><li class="p3">

<ul><li class="p4">

<ul><li class="p5">

<ul><li class="p6">

<ul><li class="p7">

<ul><li class="inner p8">

<a href="#url2"><img

src="http://1.bp.blogspot.com/-WO9z2uupN2g/TbmLu8q2zQI/AAAAAAAAAsg/hY9Litqe474/s400/blank.gif"

alt=""></a>

<div class="slide">

<div class="contents2">

<img src="http://4.bp.blogspot.com/-d-e6RmWpKRw/TbmLv9_5dnI/AAAAAAAAAtA/cppmp6u2WfM/s400/treatment.jpg"

alt="">

</div>

</div>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</div>

<div class="mandi">



<ul class="outer"><li class="p1">

<ul><li class="p2">

<ul><li class="p3">

<ul><li class="p4">

<ul><li class="p5">

<ul><li class="p6">

<ul><li class="p7">

<ul><li class="inner p8">

<a href="#url3"><img

src="http://1.bp.blogspot.com/-WO9z2uupN2g/TbmLu8q2zQI/AAAAAAAAAsg/hY9Litqe474/s400/blank.gif"

alt=""></a>

<div class="slide">

<div class="contents1">

<img src="http://1.bp.blogspot.com/-ISZoDBu-wJA/TbmLvI89bzI/AAAAAAAAAso/dr1ZqrxcA8M/s400/pool.jpg"

alt="">

</div>

</div>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</li></ul>

</div>

</div>

</div>

Kode HTML di atas tidak mungkin ditempatkan pada sidebar pada halaman blogger, mengingat ukurannya yang sangat besar. Karena itu mestinya menu ini berada dibawah header diatas posting, atau di bawah posting. Bisa juga menu ini menggantikan header, atau juga menjadi footer. terserah pilhannya anda yang menentukan.

Tapi buat yang punya website dan bukan webblog, menu ini secara bebas bisa ditempatkan diposisi manapun, karena fasilitasnya memang memungkinkan.

Jadi.. semuanya pilihan anda.. Selamat mencoba..

Cara Membuat Image Horizontal Scroller Menu

Langkah-langkah Membuat Menu Image Scroller Horizontal

Posting Komentar