Friends

Monday, December 20, 2010

Membuat Menu DTree (Menu Navigasi Seperti pada Windows Explorer)

Monday, December 20, 2010  ilmu-reparasi-komputer  No comments

Pernahkah Anda blogwalking ke blog Mas Anang? Pasti kenal kan? Itu lho, blogger asal Surabaya yang artikel-artikelnya sangat menarik dan menggelitik kalau dibaca. Nah, pembaca pasti bisa melihat di bagian sidebar blog Mas Anang terdapat sebuah menu yang menyerupai menu navigasi pada Windows Explorer. Bentuk menu tersebut juga biasa disebut sebagai DTree Menu.


Pada tutorial website kali ini kita akan mencoba membuat menu Dtree pada website atau blog Anda. Sebenarnya ada beberapa situs luar negeri yang pernah membahas tutorial menu ini. Namun dari hasil temuan saya, bentuk navigasi yang merupakan karya Geir Landrö  ini jauh lebih menarik. Tentu tidak salah kalau kita pelajari namun harus tetap mengakui bahwa itu adalah karya Geir Landrö. Berikut langkah-langkah membuat menu DTree:
  1. Copy paste kode berikut sebelum kode </head> pada website atau blog Anda:
    <script src='http://nestoriko.googlepages.com/dtree.js' type='text/javascript'/>
  2. Copy paste kode CSS berikut pada file CSS website Anda. Jika pada Blogspot, copy paste sebelum kode ]]></b:skin>

    /* dtree */
    .bukasemua {
    padding-left:13px;
    background: transparent url(http://h1.ripway.com/sinaga/gambar/plus-sign.gif) no-repeat 0 55%;
    }
    .tutupsemua {
    padding-left:13px;
    background: transparent url(http://h1.ripway.com/sinaga/gambar/minus-sign.gif) no-repeat 0 55%;
    }
    .dtree {
    line-height: 11px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #41484d;
    white-space: nowrap;
    }
    .dtree img {
    border: 0px;
    vertical-align: middle;
    }
    .dtree a {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #41484d;
    text-decoration: none;
    }
    .dtree a.node, .dtree a.nodeSel {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;
    padding: 1px 2px 1px 2px;
    color: #41484d;
    }
    .dtree a.node:hover, .dtree a.nodeSel:hover {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: red;
    font-weight: normal;
    text-decoration: none;
    }
    .dtree a.nodeSel {
    /*  background-color: #c0d2ec; */
    }
    .dtree .clip {
    overflow: hidden;
    }
  3. Berikut ini contoh struktur menu Dtree yang akan kita pasang pada website. Silahkan copy paste pada bagian dimana Anda ingin menampilkan menu Dtree pada website Anda. Untuk Blogspot, jika Anda ingin menampilkan pada sidebar:
    • Masuk pada dashbor Anda kemudian klik link Tata Letak
    • Pilih tab Elemen Halaman. Kemudian klik salah satu link Tambah Gadget. Akan muncul window penambahan gadget baru. Pilih gadget HTML/Javascript
    • Copy paste struktur menu berikut pada gadget HTML/Javascript tersebut.
    <div class="dtree">
    <p style="text-align:center"><a class="bukasemua" href="javascript: d.openAll();">Buka Semua Folder</a> | <a class="tutupsemua" href="javascript: d.closeAll();">Tutup Semua</a></p>

    <script type="text/javascript">
    <!--
    d = new dTree('d','','','');
    //NAVIGASI MULAI DI SINI
    d.add(1,0,'My Documents','','My Documents','','http://h1.ripway.com/sinaga/gambar/mydocument.gif','http://h1.ripway.com/sinaga/gambar/mydocument.gif');
    d.add(2,0,'Arsip Artikel','','','','http://h1.ripway.com/sinaga/gambar/archive.gif','http://h1.ripway.com/sinaga/gambar/archive.gif');
    d.add(3,0,'Webroll','','','','http://h1.ripway.com/sinaga/gambar/globe.gif','http://h1.ripway.com/sinaga/gambar/globe.gif');
    d.add(4,0,'Friendsterroll','','','','http://h1.ripway.com/sinaga/gambar/friendster.gif','http://h1.ripway.com/sinaga/gambar/friendster.gif');
    d.add(5,0,'Question & Help','http://edit.yahoo.com/config/send_webmesg?.target=i_7dragons&.src=pg','Do You Need Some Help?','','http://h1.ripway.com/sinaga/gambar/question.gif');
    d.add(6,0,'Recycle Bin','http://tutorial-website.blogspot.com/index.html','Recycle Bin','','http://h1.ripway.com/sinaga/gambar/trash.gif');

    //MY DOCUMENTS
    d.add(4000,1,'My Pictures','','My Pictures','','http://h1.ripway.com/sinaga/gambar/imgfolder.gif','http://h1.ripway.com/sinaga/gambar/imgfolder.gif');
    d.add(4001,1,'My Music','','My Music','','http://h1.ripway.com/sinaga/gambar/musicfolder.gif','http://h1.ripway.com/sinaga/gambar/musicfolder.gif');
    d.add(4002,1,'My Video','http://profiles.friendster.com/nestoriko','My Video','','http://h1.ripway.com/sinaga/gambar/video.gif','http://h1.ripway.com/sinaga/gambar/video.gif');

    //MY PICTURES SHARED
    d.add(5000,4000,'My Pictures Shared','http://profiles.friendster.com/nestoriko','My Pictures Shared','','http://h1.ripway.com/sinaga/gambar/picture.gif');


    //MY MUSIC SHARED
    d.add(6000,4001,'My Music Shared','http://profiles.friendster.com/nestoriko','My Music Shared','','http://h1.ripway.com/sinaga/gambar/musicfile.gif');

    //BULANAN MULAI DI SINI---------------
    d.add(0,-1,'Home', 'http://tutorial-website.blogspot.com/index.html','','','');
    d.add(104,2,'Maret 2009 (1)','http://tutorial-website.blogspot.com/2009_03_01_archive.html','','','');
    d.add(103,2,'Februari 2009 (9)','http://tutorial-website.blogspot.com/2009_02_01_archive.html','','','');
    d.add(102,2,'Januari 2009 (13)','http://tutorial-website.blogspot.com/2009_01_01_archive.html','','','');
    d.add(101,2,'Agustus 2008 (1)','http://tutorial-website.blogspot.com/2008_08_01_archive.html','','','');
    d.add(100,2,'Desember 2007 (2)','http://tutorial-website.blogspot.com/2007_12_01_archive.html','','','');

    // POSTING MULAI DI SINI-----------------
    //Maret 2009
    d.add(1001,104,'Kode Warna untuk CSS','http://tutorial-website.blogspot.com/2009/03/kode-warna-untuk-css.html','Kode Warna untuk CSS','','');

    //Februari 2009
    d.add(1009,103,'Membuat Ucapan Selamat Datang Memakai Nama Pengunjung','http://tutorial-website.blogspot.com/2009/02/membuat-ucapan-selamat-datang-memakai.html','Membuat Ucapan Selamat Datang Memakai Nama Pengunjung','','');
    d.add(1008,103,'Invalid Widget ID pada Blogger','http://tutorial-website.blogspot.com/2009/02/invalid-widget-id-pada-blogger.html','Invalid Widget ID pada Blogger','','');
    d.add(1007,103,'Membuat Slide Album Foto di Blog','http://tutorial-website.blogspot.com/2009/02/membuat-slide-album-foto-di-blog.html','','','');
    d.add(1006,103,'Perbedaan Free Domain dengan Pay Domain','http://tutorial-website.blogspot.com/2009/02/perbedaan-free-domain-dengan-pay-domain.html','','','');
    d.add(1005,103,'How To Show Comment Box Below Post for WP-Polaroid Blogger Template','http://tutorial-website.blogspot.com/2009/02/to-show-comment-box-below-post-for-wp.html','','','');
    d.add(1004,103,'Membuat Kotak Komentar dibawah Posting','http://tutorial-website.blogspot.com/2009/02/show-comment-box-under-post.html','','','');
    d.add(1003,103,'Perbedaan Free Hosting dengan Pay Hosting','http://tutorial-website.blogspot.com/2009/02/perbedaan-free-hosting-dengan-pay.html','','','');
    d.add(1002,103,'Mengganti Template Blogspot','http://tutorial-website.blogspot.com/2009/02/mengganti-template-blogspot.html','','','');
    d.add(1001,103,'Sang Masterpun Ingin Pergi','http://tutorial-website.blogspot.com/2009/02/terkejutsang-masterpun-ingin-pergi.html','','','');

    //Januari 2009
    d.add(1013,102,'Lebih Jauh Mengenal Layout Blogpot (2)','http://tutorial-website.blogspot.com/2009/01/lebih-jauh-mengenal-layout-blogpot-2.html','','','');
    d.add(1012,102,'Lebih Jauh Mengenal Layout Blogpot (1)','http://tutorial-website.blogspot.com/2009/01/lebih-jauh-mengenal-layout-blogpot.html','','','');
    d.add(1011,102,'Cara Membuat Cascading Stylesheet (CSS)','http://tutorial-website.blogspot.com/2009/01/cara-membuat-cascading-stylesheet-css.html','','','');
    d.add(1010,102,'CSS At a Glance','http://tutorial-website.blogspot.com/2009/01/css-at-glance.html','','','');
    d.add(1009,102,'Bahasa Pemograman Blogspot','http://tutorial-website.blogspot.com/2009/01/bahasa-pemograman-blogspot_06.html','','','');
    d.add(1008,102,'HTML At a Glance','http://tutorial-website.blogspot.com/2009/01/pengantar-tentang-html.html','','','');
    d.add(1007,102,'Panduan Lengkap Menggunakan Blog di Blogspot','http://tutorial-website.blogspot.com/2009/01/panduan-lengkap-menggunakan-blog-di.html','','','');
    d.add(1006,102,'Panduan Membuat Blog di Blogspot','http://tutorial-website.blogspot.com/2009/01/langkah-langkah-membuat-blog-di.html','','','');
    d.add(1005,102,'Membuat Account Google','http://tutorial-website.blogspot.com/2009/01/membuat-account-google.html','','','');
    d.add(1004,102,'Antara Website, Blog, dan CMS','http://tutorial-website.blogspot.com/2009/01/antara-website-blog-dan-cms.html','','','');
    d.add(1003,102,'Hosting dan Domain','http://tutorial-website.blogspot.com/2009/01/hosting-dan-domain.html','','','');
    d.add(1002,102,'Apa sih website itu?','http://tutorial-website.blogspot.com/2009/01/apa-sih-website-itu.html','','','');
    d.add(1001,102,'Selamat Datang','http://tutorial-website.blogspot.com/2009/01/selamat-datang.html','','','');

    //Agustus 2008
    d.add(1000,101,'Wikimapia, sebuah situs pengindraan jauh (indraja)','http://tutorial-website.blogspot.com/2008/08/wikimapia-sebuah-situs-pengindraan-jauh.html','Wikimapia, sebuah situs pengindraan jauh (indraja)','','');

    //Desember 2007
    d.add(1001,100,'HARI NATAL TELAH TIBA','http://tutorial-website.blogspot.com/2007/12/hari-nataltelah-tiba.html','HARI NATAL TELAH TIBA','','');
    d.add(1000,100,'Hari Ibu hari ibuku dan ibumu','http://tutorial-website.blogspot.com/2007/12/hari-ibu-hari-ibuku-dan-ibumu.html','Hari Ibu hari ibuku dan ibumu','','');

    //WEBROLL
    d.add(2000,3,'Jasa Pembuatan Website Murah','http://www.banditbatak.com/','','','http://h1.ripway.com/sinaga/gambar/people.gif');
    d.add(2001,3,'Mahagana','http://mahagana.wordpress.com/','Mahasiswa Siaga Bencana','','http://h1.ripway.com/sinaga/gambar/people.gif');
    d.add(2002,3,'Hanna','http://hikarianna.blogspot.com/','Hanna','','http://h1.ripway.com/sinaga/gambar/people.gif');


    //FRIENDSTERROLL
    d.add(3002,4,'My Friendster','http://profiles.friendster.com/123456','Its me lae','','http://h1.ripway.com/sinaga/gambar/user.gif');


    //BAWAH
    document.write(d);
    d.closeAll();
    d.openTo(104,true);
    d.openTo(103,true);

    //-->
    </script>
    </div>
Berikut ini penjelasan dari struktur menu Dtree yang ada pada langkah 3 di atas:
Menu Dtree terdiri dari 3 bagian
  1. Menu Utama
  2. Sub Menu, dan 
  3. Item Menu.  
1. Main Menu yang bisa kita atau tambahkan secara umum berbentuk:

d.add(1,0,'Main Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');
d.add(2,0,'Main Menu 2','fill 21','fill 22','fill 23','fill 24','fill 25');
  •  Angka 1 dan 2 yang berwarna merah menunjukkan ID main menu. Main menu 1 mempunyai ID=1, dst.
  • Angka 0 yang berwarna biru menunjukkan main menu berada pada level ke 0, yaitu berada paling puncak.
  • "Main Menu 1" dan "Main Menu 2" merupakan nama Main Menu yang bisa Anda buat sendiri. 
  • Sedangkan fill 11, fill 12, dan seterusnya merupakan atribut dari main menu tersebut. Setiap atribut (fill) punya defenisi dan fungsi sendiri, yaitu:
    • Fill 11: merupakan alamat URL atau link halaman yang akan dituju jika Main Menu 1 diklik. Begitu pula fill 12 yang merupakan link atau URL halaman yang dituju jika Main Menu 2 diklik.
    • Fill 12 : merupakan tulisan yang akan muncul jika mouse digerakkan diatas Main Menu 1.
    • Fill 13 : merupakan alternatif text untuk menggantikan icon menu.
    • Fill 14 : merupakan alamat gambar yang dijadikan icon Main Menu 1.
    • Fill 15 : merupakan alamat gambar pengganti icon pada fill 14 jika Main Menu 1 diklik.
Namun, tidak semua fill harus dideklarasikan karena mungkin tidak terlalu penting atau karena sudah dideklarasikan pada kode javascript yang anda link kan pada langkah 1 di atas. Sebagai contoh:
d.add(1,0,'My Documents','','My Documents','','http://h1.ripway.com/sinaga/gambar/mydocument.gif','http://h1.ripway.com/sinaga/gambar/mydocument.gif');
d.add(2,0,'Arsip Artikel','','Arsip Article','','http://h1.ripway.com/sinaga/gambar/archive.gif','http://h1.ripway.com/sinaga/gambar/archive.gif');

2. Sub Menu yang bisa kita buat atau tambahkan berbentuk:

d.add(100,1,'Sub Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');
d.add(101,1,'Sub Menu 2','fill 11','fill 12','fill 13','fill 14','fill 15');

Coba perhatikan pola ID dari menu-menu tersebut. Angka 100 yang berwarna orange menunjukkan ID Sub Menu 1. Sedangkan angka 1 yang berwarna merah itu sebenarnya adalah ID dari Main Menu 1,sehingga Sub Menu 1 akan menjadi sub menu dari main menu 1.

Sebagai contoh:

d.add(4000,1,'My Pictures','','My Pictures','','http://h1.ripway.com/sinaga/gambar/imgfolder.gif','http://h1.ripway.com/sinaga/gambar/imgfolder.gif');
d.add(4001,1,'My Music','','My Music','','http://h1.ripway.com/sinaga/gambar/musicfolder.gif','http://h1.ripway.com/sinaga/gambar/musicfolder.gif');

3.Item Menu bentuk umumnya:

d.add(2222,100,'Item Menu 1','fill 11','fill 12','fill 13','fill 14','fill 15');
d.add(2223,100,'Item Menu 2','fill 11','fill 12','fill 13','fill 14','fill 15');

Hampir sama dengan penjelasan Sub Menu, coba perhatikan pola ID dari item-item menu tersebut. Angka 2222 yang berwarna pink menunjukkan ID item Menu 1. Sedangkan angka 100 yang berwarna orange itu sebenarnya adalah ID dari Sub Menu 1,sehingga Item Menu 1 akan menjadi item menu pada sub menu 1.

Begitu Seterusnya.
Jika Anda ingin membuat sub menu di dalam sub menu atau disebut sub sub menu, maka jadikan ID sub menu menjadi parent dari sub sub menu tersebut.

Yang terakhir:
Coba perhatikan kode paling bawah yang Anda copy paste pada langkah 3 di atas:
...
document.write(d);
d.closeAll();
d.openTo(104,true);
d.openTo(103,true);

Kode yang berwarna merah menunjukkan bahwa menu dengan ID 104 dan 103 akan terbuka. Artinya isi dari menu tersebut baik berupa sub menu, sub sub menu, maupun item menu akan terbuka ketika website atau blog pertama kali dibuka.

Posted in:

0 comments:

Post a Comment

#
### ###