Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript.
Biar agak seru, silahkan klik tombol di bawah untuk melihat demo :
Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba :
Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya.
Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya.
Untuk membuatnya silahkan ikuti langkah-langkah berikut ini :
http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif
http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif <title><data:blog.pageTitle/></title>
<script>
var last_expanded = '';
function showHide(id)
{
var obj = document.getElementById(id);
var status = obj.className;
if (status == 'hide') {
if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}
obj.className = 'show';
last_expanded = id;
} else {
obj.className = 'hide';
}
}
</script> .ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}
.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}
.hide{
display: none;
}
.show{
display: block;
}
a{cursor: hand}
Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja. <a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>
<div id="ogahku1" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>
<div id="ogahku2" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a>
<div id="ogahku3" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a>
<div id="ogahku4" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang.
Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header.
Mudah-mudahan dapat di mengerti. Selamat mencoba !
Sumber:Disini
Lokasi » Home »
Blogger Pemula
» Menu Dropdown dengan JavaScript
Menu Dropdown dengan JavaScript
Langganan:
Posting Komentar (Atom)
17 komentar:
Oke sob..ini cocoknya disidebar yah...kalo yg horizontal plus dropdown ada gak???
wah turorialnya bagus bro,,,menu dropdown emank dibutuhin ma shabat2 blog. Tips dan trik komputer
Nice tutorial
oh begitu ya caranya....
kalo di template saya sudah default dari KR...
nice info aja lah... :)
wah panjang banget..jd pusing aku,tapi luar biasa ya kamu sob..
mantab sob, truslah berbagi ilmu yang berguna..
www.lodayaku.co.cc
nice tips sobat, ijincopy scriptnya yach, thank's
wah bozz.... panjang amat ... tapi nice tutorial nich ... en sukses slalu ya brooo .... ^_^
Wah... tutorial yg sangat lugas dan mudah di pahami sob.. semangat terus sob... keep blogging and keep smile
Jadi pingin mencoba nih sobb.. thx
nice post sob thanks.....
wah kalau saya Cara Membuat Menu Horizontal Ala CNN.com Di Blog, itu juga gk kalah menariknya. karena 100% menggunakan CSS.
saya akan cb gan..
thx infonya...
ths infonya
wah .... tutorialnya oke sob... tapi sdikit memusingkan klau soal css ama edit html... klau saya mampu ntar saya coba....
wah boleh juga tuh tutornya, jadi pengen coba
Ohh.... ternyata gak terlalu sulit ya buatnya. :)
Posting Komentar