jendelablog.wordpress.com

budiscyan weblog area's

Trik Membuat Slider Menu

Seperti sebelum-sebelumnya, trik ini juga terinspirasi dari menu slider di blogspot. Perbedaannya, di blogspot menu ini di custom menggunakan css dan javascript sedangkan di multiply kita akan mencoba membuatnya dengan menggunakan CSS dan HTML saja.

ada yang belum tahu yang saya maksud? mungkin screenshot ini bisa membantu,

Yang di sidebar (Recentpost, Favorites, Categories dll ) itu yang saya maksud slider menu

Pada prinsipnya trik ini menggunakan fungsi dari link anchor. Jika anda pernah menjumpai situs yang menggunakan link ‘Back to Top’, pasti anda akan mengerti prinsip kerjanya. Itulah yang dinamakan link anchor.

Baik, kita mulai saja.
1. Mula-mula masukkan CSS ini ke http://multiply.com/setup/pages/upload-css :

#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}

#content {
width: 340px;
height: 100px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#content ul {
overflow: auto;
height: 100px;
width: 320px;
position: absolute;
top: 0;
left: -300px;
z-index: 1;
opacity: 0;
}
#content ul:target {
left: 0;
z-index: 9;
opacity: 1;
}
#content ul:first-child {
left: 0;
opacity: 1;
}

Keterangan :

  • Selector ‘#slider’ di gunakan untuk button link anchor
  • Selector ‘#content’ di gunakan untuk Menempatkan isi konten

2.Langkah kedua masukkan HTML ini ke Welcome box

<div id=”slider”>
<a href=”#1″>Main Menu</a><a href=”#2″>Recent Post</a><a href=”#3″>Favorites</a><a href=”#4″>Categories</a><a href=”#5″>Archieves</a>
</div>

<div id=”content”>
<ul id=”1″>isikan konten anda di sini</ul>
<ul id=”2″>isikan konten anda di sini</ul>
<ul id=”3″>isikan konten anda di sini</ul>
<ul id=”4″>isikan konten anda di sini</ul>
<ul id=”5″>isikan konten anda di sini</ul>
</div>

Keterangan :

  • Yang saya block hijau itu bisa diganti sesuai yang anda inginkan

Selamat Mencoba

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Information

This entry was posted on 18 Desember 2011 by in artikel.

Kategori

Blog Statistic

  • 21,292 hits

Contact

%d blogger menyukai ini: