0 Membuat Vertical Scrollable Menu Dengan CSS Dan JQuery

Kali ini saya akan membuat satu lagi posting membuat vertikal widget menu degan scroll, dengan tampilan scroll menarik yaitu tanpa adanya scrollbar seperti biasa yang kamu lihat pada widget yang memanjang.



Nantinya penggerak scrollnya akan menggunakan tombol next / previous. Agar lebih jelas silakan kamu lihat contoh yang sudah berhasil saya buat disini. Perhatikan menu dengan tombol next dan preview di sebelah kanan, silakan kmau klik tombolnya dan menu itu akan tergulung ke atas atau kebawah dan menampilkan menu yang sebelumnya tersembunyi di bawahnya.

Disini saya akan menjelaskan pemasanganya di blogger

• Struktur kode HTML JavaScript untuk membuatnya seperti di bawah ini, silahkan letakkan pada elemen halaman kamu pada menu HTML/JavaScript

/* HTML/JavaScript Structure */

---

<div class="scrollable vertical">
<!-- root element for the items -->
<div class="items">
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/3650/3323058611_d35c894fab_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>

<div class="item">
<img src="http://farm1.static.flickr.com/3635/3323893254_3183671257_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>


<div class="item">
<img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>
</div>

<!-- next page -->
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>


<div class="item">
<img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>


<div class="item">
<img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>
</div>


<!-- next page -->
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>


<div class="item">
<img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>


<div class="item">
<img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>
</div>

<!-- next page -->
<div>
<div class="item">
<img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>


<div class="item">
<img src="http://farm1.static.flickr.com/3629/3323896446_3b87a8bf75_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>


<div class="item">
<img src="http://farm1.static.flickr.com/3023/3323897466_e61624f6de_m.jpg" />
<h3>JUDUL MENU</h3>
<strong>SUB JUDUL MENU</strong>
<p>KETERANGAN MENU</p>
<p>
<a href="#">Read more</a> &nbsp; <a href="#">Show in map</a>
</p>
</div>
</div>
</div>
</div>

<!-- javascript coding -->
<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
</script>

.
Keterangan :
Struktur kode di atas adalah struktur untuk mengatur isi dari menu kmau nantinya, kode

img src

adalah kode untuk memberi url gambar menu kamu nantinya, kamu bisa memodifikasinya menjadi link gambar untuk menu kamu, dan kode yang di awali dan di akhiri dengan <h3></h3> adalah teks judul untuk menu kamu, dan teks yang di awali dan di akhiri dengan kode <strong></strong> adalah sub judul dari menu kamu (yang berhuruf tebal pada contoh), selanjutnya adalah teks keterangan dari menu kamu yang di awali dengan kode <p></p> (yang pertama), dan kode <p></p> yang ke dua adalah link untuk tombol next atau previous yang bisa kamu ganti dengan kata kata kamu sendiri.

Perhatikan tanda <!-- next page --> tanda ini menunjukan berapa menu yang akan kamu tampilkan setiap satu kali scroll dan dan untuk membuat menunya sendiri kita memasukkan menu kita di dalam tag <div>

Setiap struktur kode satu menu di awali dan di akhiri dengan <div class="item"></div>

• Berikutnya adalah struktur CSSnya yang harus kamu letakkan di atas atau sebelum kode ]]></b:skin>

/* CSS Srtucture */

---

/* elemen utama dari menu scroll */
.vertical {
position:relative;
overflow:hidden;
/* pengaturan tinggi dan lebar, nilai tingginya(height) dibuat lebih besar dari lebar(width) */
height: 665px;
width: 700px;
border-top:1px solid #ddd;
}
/* elemen utama item atau isi scroll */
.items {
position:absolute;
height:20000em;
margin: 0px;
}
/* elemen pengaturan setiap satu menunya */
.item {
border-bottom:1px solid #ddd;
margin:10px 0;
padding:15px;
font-size:12px;
height:180px;
}
/* element di dalam menu disini misalnya gambar */
.item img {
float:left;
margin-right:20px;
height:180px;
width:240px;
}.item h3 {
margin:0 0 5px 0;
font-size:16px;
color:#456;
font-weight:normal;
}
/* panjang dari elemen menggerak sebaiknya lebarnya samakan dengan lebar menu */
#actions {
width:700px;
margin:30px 0 10px 0;
}
#actions a {
font-size:11px;
cursor:pointer;
color:#666;
}
#actions a:hover {
text-decoration:underline;
color:#000;
}
.disabled {
visibility:hidden;
}
.next {
float:right;
}

.
Pada struktur css di atas sudah saya beri keterangan untuk pengaturan setiap strukturnya yang bisa kamu modifikasi sesuka kamu.

Yang di perlukan selanjutnya dalah struktur javascript kode yang harus kamu letakkan di atas kdoe </body>

<script>
// execute your scripts when DOM is ready. this is a good habit
$(function() {

// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });

});
</script>

.
Dan langkah yang terakhir letakkan script js beikut di bawah atau setelah kode <head>

<script src='http://izoeljquerytools.googlecode.com/files/jquery.tools.min.js'/>

.
Selanjutnya kamu bisa menyimpan pengaturan kamu,