Permisi buat moderator untuk sharing Sebenarnya saya cuma modifikasi dari thread [url=http://theftalk.com/t21022-floating-objects-left-side-%28JS%29.html]floating objectnya[/url] Shakiro Disini saya pake untuk floating accordion menu Screenshoot : [spoiler][img]http://img80.imageshack.us/img80/3825/accordiontu3.jpg[/img][/spoiler] [url=http://profiles.friendster.com/12851239]Live preview[/url] [url=http://www.freewebtown.com/strezzpc/preview/preview_acdmenu.html]HTML preview[/url] Credit : [url=http://profiles.friendster.com/shakiroShakiro]Shakiro[/url] [url=http://www.dynamicdrive.com/]dynamicdrive[/url] Langkah pertama : Buat file js baru, dengan nama terserah kamu. contoh : [b]accordcontent.js [/b] Yg berisi <">Lalu injectkan kedalam JS utama kamu, letakkan di bagian A (sesuai [url=http://theftalk.com/t15339-%7BTUTORIAL%7D-Kombinasi-JS-dan-WVM-%2B-Addbox-%28UPDATE-08-03-08%29.html]tutorial bang Kanal[/url]) [quote]//ACCORDIONT CONTENT var myjs = document.createElement("script"); myjs.type = "text/javascript"; myjs.src = "[color=green]URL_ACCORDCONTENT_KAMU[/color]"; document.getElementsByTagName("head")[0].appendChild(myjs);[/quote] [color=green]URL_ACCORDCONTENT_KAMU[/color] adalah url dari file [b]accordcontent.js[/b] yg baru kamu buat Langkah berikutnya, masukkan script ini di bagian C (sesuai [url=http://theftalk.com/t15339-%7BTUTORIAL%7D-Kombinasi-JS-dan-WVM-%2B-Addbox-%28UPDATE-08-03-08%29.html]tutorial bang Kanal[/url]) [spoiler]//FLOATING ACCORDION MENU floataccord="<div id='divStayTopLeft' style='position:absolute;z-index:50;'><div class='glossymenu'>"+ "<a class='menuitem' href='http://www.friendster.com/'>Home</a>"+ "<a class='menuitem submenuheader' href='http://www.friendster.com/user.php' >My Profile</a>"+ "<div class='submenu'>"+ "<ul><li><a href='http://www.friendster.com/editprofile.php'>Edit Profile</a></li>"+ "<li><a href='http://www.friendster.com/friends.php/ID_FS_KAMU'>My Friends</a></li>"+ "<li><a href='http://www.friendster.com/photos/ID_FS_KAMU'>My Photos</a></li>"+ "<li><a href='http://www.friendster.com/messages.php'>Messages</a></li>"+ "<li><a href='http://www.friendster.com/editaccount.php'>Settings</a></li>"+ "<li><a href='http://www.friendster.com/gallery.php'>Search</a></li>"+ "<li><a href='http://www.friendster.com/widget_myapps.php'>Applications</a></li></ul>"+ "</div>"+ "<a class='menuitem submenuheader' href='http://www.friendster.com/friends.php'>My Connections</a>"+ "<div class='submenu'>"+ "<ul><li><a href='http://www.friendster.com/friends.php'>Friends</a></li>"+ "<li><a href='http://www.friendster.com/schools.php'>Schools</a></li>"+ "<li><a href='http://www.friendster.com/bookmarks.php'>Bookmarks</a></li>"+ "<li><a href='http://www.friendster.com/group/mygroup.php'>Groups</a></li>"+ "</div>"+ "<a class='menuitem submenuheader' href='http://www.friendster.com/explore.php'>Explore</a>"+ "<div class='submenu'>"+ "<ul><li><a href='http://www.friendster.com/userlist.php?list=newusers'>People</a></li>"+ "<li><a href='http://www.friendster.com/photolist.php?list=mostrecent'>Photos</a></li>"+ "<li><a href='http://www.friendster.com/video.php'>Videos</a></li>"+ "</div>"+ "<a class='menuitem submenuheader' href='http://theftalk.com'>My Credits</a>"+ "<div class='submenu'>"+ "<ul><li><a href='http://theftalk.com' target='_blank'>Friendstertalk.com</a></li>"+ "<li><a href='http://ripway.com/' target='_blank'>Ripway.com</a></li>"+ "<li><a href='http://www.myflashfetish.com/' target='_blank'>Myflashfetish.com</a></li>"+ "<li><a href='http://dynamicdrive.com/' target='_blank'>Dynamicdrive.com</a></li>"+ "<li><a href='http://www.slide.com/' target='_blank'>Slide.com</a></li>"+ "<li><a href='http://www.photobucket.com/' target='_blank'>Photobucket.com</a></li>"+ "<li><a href='http://www.cbox.ws/' target='_blank'>Cbox.ws</a></li>"+ "</div>"+ "<a class='menuitem' href='http://www.friendster.com/logout.php' style='border-bottom-width: 0'>Log Out</a>"+ "</div></div>"; flow=document.getElementById('flo_wrapper'); river=document.createElement("div"); river.innerHTML=floataccord; flow.parentNode.insertBefore(river,flow); //in this part you can change it into "frombottom" or "fromtop" var verticalpos="fromtop" function BoyantDiv() { var startX = 20; var startY = 170; function ml(id) { if (document.getElementById) { var wek=document.getElementById(id); } else if (document.all) { var wek=document.all[id]; } else { var wek=document.layers[id]; } if(document.layers) { wek.style=wek; } wek.sP = function(x,y) {shino(x,y);}; function shino(x,y) { wek.style.left=x; wek.style.top=y; } wek.x = startX; if (verticalpos=="fromtop") { wek.y = startY; } else{ if (navigator.appName.indexOf("Netscape") != -1) { wek.y = pageYOffset + innerHeight; } else { wek.y = document.body.scrollTop + document.body.clientHeight; } wek.y -= startY; } return wek; } window.stayTopLeft = function () {boyant();}; function boyant() { if (verticalpos=="fromtop"){ if (navigator.appName.indexOf("Netscape") != -1) { var tenten = pageYOffset; } else { var tenten = document.body.scrollTop; } ftlObj.y += (tenten + startY - ftlObj.y)/8; } else{ if (navigator.appName.indexOf("Netscape") != -1) { var tenten = pageYOffset + innerHeight; } else { var tenten = document.body.scrollTop + document.body.clientHeight; } ftlObj.y += (tenten - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); wakoko=setTimeout("stayTopLeft()", 50); } ftlObj = ml("divStayTopLeft"); stayTopLeft(); } BoyantDiv();[/spoiler] Edit ID_FS_KAMU dengan ID FS kamu sendiri Langkah terakhir masukkan code ini kedalam css kamu : [spoiler]/* fLoating accordiont styLe */ .glossymenu{ margin: 5px 0; padding: 0; width: 170px; /*width of menu*/ border: 1px solid #9A9A9A; border-bottom-width: 0; } .glossymenu a.menuitem{ background: black url([i]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback.gif[/i]) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; text-align:left; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; } .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{ color: white; } .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/ position: absolute; top: 5px; right: 5px; border: none; } .glossymenu a.menuitem:hover{ background-image: url([i]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback2.gif[/i]); } .glossymenu div.submenu{ /*DIV that contains each sub menu*/ background: white; } .glossymenu div.submenu ul{ /*UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; } .glossymenu div.submenu ul li{ border-bottom: 1px solid blue; } .glossymenu div.submenu ul li a{ display: block; font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: black; text-align:left; text-decoration: none; padding: 2px 0; padding-left: 10px; } .glossymenu div.submenu ul li a:hover{ background: #E2EDFA; colorz: white; }[/spoiler] [i] [u]Keterangan :[/u][/i] [li]Untuk merubah image header, rubah di cssnya bagian [/li] [quote].glossymenu a.menuitem{ background: black url([color=red]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback.gif[/color]) repeat-x bottom left; font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif; color: white; text-align:left; display: block; position: relative; /*To help in the anchoring of the ".statusicon" icon image*/ width: auto; padding: 4px 0; padding-left: 10px; text-decoration: none; }[/quote] dan [quote].glossymenu a.menuitem:hover{ background-image: url([color=red]http://i264.photobucket.com/albums/ii200/strezzpc/glossyback2.gif[/color]); }[/quote] [li]Untuk merubah image plus dan minus, cari di file [b]accordcontent.js[/b] bagian yg ini :[/li] [quote]togglehtml: ["suffix", "<img src='[color=blue]http://i264.photobucket.com/albums/ii200/strezzpc/plusplus.gif[/color]' class='statusicon' />", "<img src='[color=blue]http://i264.photobucket.com/albums/ii200/strezzpc/minus.gif[/color]' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)[/quote] [li]Untuk menambahkan menu, sisipkan bagian ini :[/li] [quote]<a class='menuitem submenuheader' href='URL_YG DITUJU'>JUDUL_MENU</a>"+ "<div class='submenu'>"+ "<ul><li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+ "<li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+ "<li><a href='URL_YG DITUJU'>JUDUL_SUB_MENU</a></li>"+ "</div>[/quote] Semoga bisa dimengerti, silahkan untuk berkreasi sendiri dan selamat mencoba [hr] Ini tambahan buat [color=red]image headernya[/color] : [spoiler][img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossyback.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossyback2.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackblack.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackblack2.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackred.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/header/glossybackred2.gif[/img][/spoiler] Untuk icon [color=blue]plus minus[/color] [img]http://i264.photobucket.com/albums/ii200/strezzpc/plusplus.gif[/img] [img]http://i264.photobucket.com/albums/ii200/strezzpc/minus.gif[/img]

Last edited by strezzpc (2009-02-05 07:31:26)