Mendowan

Cerita-cerita, Berita, Kritik, Suara Rakyat

Tips membuat menu tab dengan javascript dan css.

menu tabbed, menu tabkenapa harus menggunakan javascript? karena sejauh ini yang memengang peranan pada pemrograman browser adalah javascript. CSS digunakan untuk memformat tampilan agar menyerupai tabbed, kayak di interface windows.Ngomong-ngomong soal tabbed (entah benar atau tidak menyebutkannya, mohon diperbaiku), modelnya kayak di mozilla versi 2.x, dimana anda bisa menambahkan tab (window baru yang terintegrasi dengan window utama) dengan cara Ctrl+T. Nah kita akan mencoba membuat menu seperti itu pada halaman web. Menu ini cocok untuk web berbasis AJAX, atau menggunakan iframe, biar terlihat lebih app-desktop, he he

karena pada blogger, saya tidak bisa menulis kode HTML (sebenarnya bukan tidak bisa, tetapi sulit) makanya saya memisahkan kode HTML nya. Anda bisa mendowanloadnya disini.
tampilannya seperti dibawah ini.


menu tabbed, Menu javascript




inti dari menu ini ada pada script dibawah ini.
var old_id='a'; //-- id dari tag yang menjadi tab aktiv.
function x(id){
with (document.getElementById(id).style){
backgroundColor='#fff';
borderLeft='1px solid red';
borderTop='1px solid red';
borderRight='1px solid red';
}
with(document.getElementById(old_id).style){
backgroundColor='#008080';
borderLeft='1px solid #008000';
borderTop='1px solid #008000';
borderRight='1px solid #008000';
}
old_id=id;
}
Anda bisa mengembangkan script ini sesuai dengan kebutuhan, yang penting anda mengetahui cara kerja dari script ini. selamat mencoba dan mengembangkan.

AddThis Social Bookmark Button

4 comments

Post a Comment