Membuat menu bercabang (D-Tree)

Menu ini awalnya aku terinspirasi dengan gadget standart blogger, yaitu gadget archive. di situ terdapat menu yang bercabang ketika menu tahun dibuka, maka tampil menu bulan, setelah menu bulan tampillah postingan-postingan. Nah kemudian aku berfikir! bagaimana seandainya diberi icon dan dibuat seperti menu pada windows explorer. pasti keren.

Oke bagaimana cara membuatnya. siapkan kopi hangat dulu agar tidak jenuh.... kalo sudah! gini caranya:

Masuk ke fasilitas edit html dari penyedia blog/web masing-masing
Misalnya kalau di blogger seperti ini:
=> Pertama yang pasti kita harus login dulu
=> Setelah di dashboard masuk ke design
=> Pilih EDIT HTML=> Cari kode ini </head> untuk mempermudah pencarian gunakan ctrl+f
=> Letakkan script dibawah ini diatas kode </head> . ( Intinya kode tersebut dipasang pada bagian head )

<style type="text/css">.dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap;}.dtree img { border: 0px; vertical-align: middle;}.dtree a { color: #333; text-decoration: none;}.dtree a.node, .dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px;}.dtree a.node:hover, .dtree a.nodeSel:hover { color: #333; text-decoration: underline;}.dtree a.nodeSel { background-color: #c0d2ec;}.dtree .clip { overflow: hidden;}</style>
=> Setelah di save, kita masuk ke page element/pengaturan elemen halaman.

=> Tambahkan gadget HTML/JAVASCRIPT di sidebar yang diinginkan. kemudian tambahkan script dibawah ini:

Kalau sobat pingin yang CSS dan JAVASCRIPTnya external nie scriptnya

<html><head><link rel="StyleSheet" href="http://amen24.googlepages.com/dtree.css" type="text/css"><script type="text/javascript" src="http://amen24.googlepages.com/dtree.js"></script></head><body><div style="height:270px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;"><div class="dtree"><p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p><script type="text/javascript"></script></div></div></body></html>

Kalau sobat pingin yang internal nie scriptnya

<html><head><style type="text/css">.dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap;}.dtree img { border: 0px; vertical-align: middle;}.dtree a { color: #333; text-decoration: none;}.dtree a.node, .dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px;}.dtree a.node:hover, .dtree a.nodeSel:hover { color: #333; text-decoration: underline;}.dtree a.nodeSel { background-color: #c0d2ec;}.dtree .clip { overflow: hidden;}</style><script type='text/javascript'>// Node objectfunction Node(id, pid, name, url, title, target, icon, iconOpen, open) { this.id = id; this.pid = pid; this.name = name; this.url = url; this.title = title; this.target = target; this.icon = icon; this.iconOpen = iconOpen; this._io = open || false; this._is = false; this._ls = false; this._hc = false; this._ai = 0; this._p;};// Tree objectfunction dTree(objName) { this.config = { target : null, folderLinks : true, useSelection : true, useCookies : true, useLines : true, useIcons : true, useStatusText : false, closeSameLevel : false, inOrder : false } this.icon = { root : 'http://amen24.googlepages.com/base.gif', folder : 'http://amen24.googlepages.com/folder.gif', folderOpen : 'http://amen24.googlepages.com/folderopen.gif', node : 'http://amen24.googlepages.com/page.gif', empty : 'http://amen24.googlepages.com/empty.gif', line : 'http://amen24.googlepages.com/line.gif', join : 'http://amen24.googlepages.com/join.gif', joinBottom : 'http://amen24.googlepages.com/joinbottom.gif', plus : 'http://amen24.googlepages.com/plus.gif', plusBottom : 'http://amen24.googlepages.com/plusbottom.gif', minus : 'http://amen24.googlepages.com/minus.gif', minusBottom : 'http://amen24.googlepages.com/minusbottom.gif', nlPlus : 'http://amen24.googlepages.com/nolines_plus.gif', nlMinus : 'http://amen24.googlepages.com/nolines_minus.gif' }; this.obj = objName; this.aNodes = []; this.aIndent = []; this.root = new Node(-1); this.selectedNode = null; this.selectedFound = false; this.completed = false;};// Adds a new node to the node arraydTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) { this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);};// Open/close all nodesdTree.prototype.openAll = function() { this.oAll(true);};dTree.prototype.closeAll = function() { this.oAll(false);};// Outputs the tree to the pagedTree.prototype.toString = function() { var str = '<div class="dtree">\n'; if (document.getElementById) { if (this.config.useCookies) this.selectedNode = this.getSelected(); str += this.addNode(this.root); } else str += 'Browser not supported.'; str += '</div>'; if (!this.selectedFound) this.selectedNode = null; this.completed = true; return str;};// Creates the tree structuredTree.prototype.addNode = function(pNode) { var str = ''; var n=0; if (this.config.inOrder) n = pNode._ai; for (n; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == pNode.id) { var cn = this.aNodes[n]; cn._p = pNode; cn._ai = n; this.setCS(cn); if (!cn.target && this.config.target) cn.target = this.config.target; if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id); if (!this.config.folderLinks && cn._hc) cn.url = null; if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) { cn._is = true; this.selectedNode = n; this.selectedFound = true; } str += this.node(cn, n); if (cn._ls) break; } } return str;};// Creates the node icon, url and textdTree.prototype.node = function(node, nodeId) { var str = '<div class="dTreeNode">' + this.indent(node, nodeId); if (this.config.useIcons) { if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node); if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node; if (this.root.id == node.pid) { node.icon = this.icon.root; node.iconOpen = this.icon.root; } str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />'; } if (node.url) { str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"'; if (node.title) str += ' title="' + node.title + '"'; if (node.target) str += ' target="' + node.target + '"'; if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" '; if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc)) str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"'; str += '>'; } else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id) str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">'; str += node.name; if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '</a>'; str += '</div>'; if (node._hc) { str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">'; str += this.addNode(node); str += '</div>'; } this.aIndent.pop(); return str;};// Adds the empty and line iconsdTree.prototype.indent = function(node, nodeId) { var str = ''; if (this.root.id != node.pid) { for (var n=0; n<this.aIndent.length; n++) str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />'; (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1); if (node._hc) { str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="'; if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus; else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) ); str += '" alt="" /></a>'; } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />'; } return str;};// Checks if a node has any children and if it is the last siblingdTree.prototype.setCS = function(node) { var lastId; for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == node.id) node._hc = true; if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id; } if (lastId==node.id) node._ls = true;};// Returns the selected nodedTree.prototype.getSelected = function() { var sn = this.getCookie('cs' + this.obj); return (sn) ? sn : null;};// Highlights the selected nodedTree.prototype.s = function(id) { if (!this.config.useSelection) return; var cn = this.aNodes[id]; if (cn._hc && !this.config.folderLinks) return; if (this.selectedNode != id) { if (this.selectedNode || this.selectedNode==0) { eOld = document.getElementById("s" + this.obj + this.selectedNode); eOld.className = "node"; } eNew = document.getElementById("s" + this.obj + id); eNew.className = "nodeSel"; this.selectedNode = id; if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id); }};// Toggle Open or closedTree.prototype.o = function(id) { var cn = this.aNodes[id]; this.nodeStatus(!cn._io, id, cn._ls); cn._io = !cn._io; if (this.config.closeSameLevel) this.closeLevel(cn); if (this.config.useCookies) this.updateCookie();};// Open or close all nodesdTree.prototype.oAll = function(status) { for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) { this.nodeStatus(status, n, this.aNodes[n]._ls) this.aNodes[n]._io = status; } } if (this.config.useCookies) this.updateCookie();};// Opens the tree to a specific nodedTree.prototype.openTo = function(nId, bSelect, bFirst) { if (!bFirst) { for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n].id == nId) { nId=n; break; } } } var cn=this.aNodes[nId]; if (cn.pid==this.root.id || !cn._p) return; cn._io = true; cn._is = bSelect; if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls); if (this.completed && bSelect) this.s(cn._ai); else if (bSelect) this._sn=cn._ai; this.openTo(cn._p._ai, false, true);};// Closes all nodes on the same level as certain nodedTree.prototype.closeLevel = function(node) { for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) { this.nodeStatus(false, n, this.aNodes[n]._ls); this.aNodes[n]._io = false; this.closeAllChildren(this.aNodes[n]); } }}// Closes all children of a nodedTree.prototype.closeAllChildren = function(node) { for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) { if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls); this.aNodes[n]._io = false; this.closeAllChildren(this.aNodes[n]); } }}// Change the status of a node(open or closed)dTree.prototype.nodeStatus = function(status, id, bottom) { eDiv = document.getElementById('d' + this.obj + id); eJoin = document.getElementById('j' + this.obj + id); if (this.config.useIcons) { eIcon = document.getElementById('i' + this.obj + id); eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon; } eJoin.src = (this.config.useLines)? ((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)): ((status)?this.icon.nlMinus:this.icon.nlPlus); eDiv.style.display = (status) ? 'block': 'none';};// [Cookie] Clears a cookiedTree.prototype.clearCookie = function() { var now = new Date(); var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24); this.setCookie('co'+this.obj, 'cookieValue', yesterday); this.setCookie('cs'+this.obj, 'cookieValue', yesterday);};// [Cookie] Sets value in a cookiedTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) { document.cookie = escape(cookieName) + '=' + escape(cookieValue) + (expires ? '; expires=' + expires.toGMTString() : '') + (path ? '; path=' + path : '') + (domain ? '; domain=' + domain : '') + (secure ? '; secure' : '');};// [Cookie] Gets a value from a cookiedTree.prototype.getCookie = function(cookieName) { var cookieValue = ''; var posName = document.cookie.indexOf(escape(cookieName) + '='); if (posName != -1) { var posValue = posName + (escape(cookieName) + '=').length; var endPos = document.cookie.indexOf(';', posValue); if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos)); else cookieValue = unescape(document.cookie.substring(posValue)); } return (cookieValue);};// [Cookie] Returns ids of open nodes as a stringdTree.prototype.updateCookie = function() { var str = ''; for (var n=0; n<this.aNodes.length; n++) { if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) { if (str) str += '.'; str += this.aNodes[n].id; } } this.setCookie('co' + this.obj, str);};// [Cookie] Checks if a node id is in a cookiedTree.prototype.isOpen = function(id) { var aOpen = this.getCookie('co' + this.obj).split('.'); for (var n=0; n<aOpen.length; n++) if (aOpen[n] == id) return true; return false;};// If Push and pop is not implemented by the browserif (!Array.prototype.push) { Array.prototype.push = function array_push() { for(var i=0;i<arguments.length;i++) this[this.length]=arguments[i]; return this.length; }};if (!Array.prototype.pop) { Array.prototype.pop = function array_pop() { lastElement = this[this.length-1]; this.length = Math.max(this.length-1,0); return lastElement; }};</script></head><body><div style="height:270px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;"><div class="dtree"><p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p><script type="text/javascript"></script></div></div></body></html>

=> Script yang warna merah bisa kamu ganti... maaf kalau cuman awal-awalnya saja yang ku beri warna merah... habisnya lama sih kalau aku ngedit satu-satu. sahabat pasti bisa membedakan mana yang perlu diganti atau tidak.

Saya saranin pakai yang EXTERNAL saja! agar mudah proses loading nya

HASILNYA AKAN SEPERTI INI:

Bagaimana untuk menambahkan folder???

Untuk menambahkan folder sedikit rumit dan butuh kejelian begini caranya:

Perhatikan angka-angka pada bagian script yang ini (perhantikan angka! jangan hiraukan kata)
d.add(0,-1,'Home','http://cyberyaqin.blogspot.com');d.add(1,0,'Menu')d.add(3,1,'Remaja','');d.add(10,3,'Hati-hati penipuan','http://cyberyaqin.blogspot.com/2010/12/hati-hati-dengan-penipuan.html');d.add(20,3,'Tips jika diliatin orang','http://cyberyaqin.blogspot.com/2010/11/tips-jika-dilihatin-orang-terus.html');d.add(30,3,'puisi','http://cyberyaqin.blogspot.com/2010/11/puisi-on-cyberyaqin.html');d.add(4,1,'Student area');d.add(10,4,'Tips semangat menulis','http://cyberyaqin.blogspot.com/2010/11/menulis-itu-sulit.html');d.add(20,4,'Tips giat membaca','http://cyberyaqin.blogspot.com/2010/12/perbanyak-membaca-tips.html');d.add(30,4,'Hati-hati penipuan','http://cyberyaqin.blogspot.com/2010/12/hati-hati-dengan-penipuan.html');d.add(6,1,'Telkomsel');d.add(10,6,'Telkmsel sponsor setia acara di SMKN 3 Buduran','http://cyberyaqin.blogspot.com/2010/12/telkomsel-sponsor-setia-smkn-3-buduran.html');d.add(20,6,'Telkomsel jaringannya paling mantap','http://cyberyaqin.blogspot.com/2010/11/sobat-blog-kali-ini-saya-akan-berbagi.html');d.add(30,6,'Lomba blog TSC','http://www.telkomselschoolblog.com/');d.add(2,0,'Link sahabat','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');d.add(10,2,'Ridho','http://iloveyouindonesia.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');

X> Angka-angka itu saya umpamakan dengan (x,y)। jika diperhatikan! sub menu dibawah menu utama, nilai angka (y) nya selalu sama dengan nilai angka (x) pada menu utama। jadi jika kita ingin menambahkan isi maka bisa kita copas। misal
d.add(1,0,'Menu') dicopas, kemudian mengubah angkanya menjadi seperti ini d.add(3,0,'Menu') angka 0 didapat dari nilai angka (x) pada menu diatasnya (coba diliat lagi kalau nggak percaya).

NB: folder tidak akan menjadi folder jika tidak ada isinya

Bagaimana membuat isinya???

di bawah script untuk foldernya kamu masukkan script yang sama yaitu yang berawalan d.add hingga ; . bedanya nilai angka pada (x) disini diawali dengan angka 10 misal: d.add(10,3,'Hati-hati penipuan','http://cyberyaqin.blogspot.com/2010/12/hati-hati-dengan-penipuan.html'); angka 3 didapat dari nilai angka (x) pada script folder diatasnya.

Kalau sobat pingin melihat previewnya sobat bisa klik DISINI

Itu saja yang dapat saya sampaikan, kritik, saran dan komentar akan sangat membantuku. jika ada pertanyaan aku bersedia menjawabnya. semoga bermanfaat

14 comments:

BLOG-SANTAI said...: wadduh koq jadi puyeng gini yah?
Hahahaha; December 9, 2010 at 2:32 AM
YQN said...: Q yang ngepost ja juga ikut bingung kok! hahaha... emang gitu sob... ruwet memang; December 9, 2010 at 3:33 AM
tihang said...: cukup panjang/banyak kodenya, menurut saya sangat kreatif.; December 9, 2010 at 6:59 AM
goceng blog said...: hmm... menyimak comment orang... :)
save dulu ach dari pada ikutang bingunk; December 9, 2010 at 7:23 AM
YQN said...: @tihang: thanks! sebenarnya gag pnjang... kalau pkek ang ekstrnal
@goceng: hahahaha; December 9, 2010 at 11:18 PM
penghuni60 said...: busyet deh... byk kode2nya ya...
aku save dulu ya biar aku plajari; December 10, 2010 at 10:59 AM
Science Box said...: info sperti ini jujur aku baru tau dari sini...
menarik jg sih utk diplajari, bwt nambah ilmu..
slm knl ya; December 10, 2010 at 10:59 AM
YQN said...: Penghuni60: Oke-oke
Science Box: Saya sangat berterima kasih. salam knal juga; December 10, 2010 at 11:55 PM
Three said...: This comment has been removed by the author.; December 11, 2010 at 1:29 PM
Three said...: AKu ngga ngerti tentang kode HTML heehee, mau nyoba tapi bingung; December 11, 2010 at 1:29 PM
YQN said...: itu sebenarbya mudah sob... cuman maen logika! yang gampang pakek yang cara external aja!; December 11, 2010 at 2:52 PM
Unknown said...: trims. banyak bantu yang pemula nih; December 25, 2010 at 12:07 AM
YQN said...: soryy kalo tulisannya kekecilen....

langsung copas dan besarkan sendiri kalo seandainya pengen hasil yang besar; January 11, 2011 at 4:35 PM
Eko Hendriansyah said...: Kapan2 pasti aq cobain. Thanks bt yg punya blog nie yah.. Bt yang laen, tlong mampir di blog q ya, http://www.ekohendriansyah.co.cc/; March 10, 2011 at 3:25 AM