1.[b]Apple style Accordion Menu[/b]
just wanna share
credit :
dynamic drive
me
inspiration:
Annoer
[spoiler]
step1:
use this code to your css for hide cp button
<">step 2:
download this code
[url]http://h1.ripway.com/agam10/ddaccordion.js[/url]
[url]http://h1.ripway.com/agam10/jquery-1.2.2.pack.js[/url]
step3:
download this picture
[img]http://h1.ripway.com/agam10/silvergradient.gif[/img][img]http://h1.ripway.com/agam10/silvergradientover.gif[/img]
step4:
crete new text file and input HTML code
[quote]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="[b]URL jquery-1.2.2.pack.js lo[/b]
"></script>
<script type="text/javascript" src="[b]URL ddaccordion.js lo[/b]">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (
www.dynamicdrive.com)
* Visit
http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
<style type="text/css">
.applemenu{
margin: 5px 0;
padding: 0;
width: 150px; /*width of menu*/
border: 1px solid #9A9A9A;
}
.applemenu div.silverheader a{
background: black url([b]URL pic[/b]) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}
.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}
.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url([b]URL pic[/b]);
color: white;
}
.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 110px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}
</style>
</head>
<body>
<div class="applemenu">
<div class="silverheader"><a href="http://www.friendster.com/comments.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">[b]your text[/b]</a></div>
<div class="submenu">
Ebeng Cakep<br />
</div>
<div class="silverheader"><a href="http://www.friendster.com/messages.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">[b]your text[/b]</a></div>
<div class="submenu">
Ebeng Cakep<br />
</div>
<div class="silverheader"><a href="[b]Your URL[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">[b]URL name[/b]</a></div>
<div class="submenu">
Ebeng Cakep<br />
</div>
<div class="silverheader"><a href="Your URL" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">[b]URL name[/b]</a></div>
<div class="submenu">
Ebeng Cakep<br />
</div>
<div class="silverheader"><a href="[b]Your URL[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">[b]URL name[/b]</a></div>
<div class="submenu">
Ebeng Cakep<br />
</div>
</div>
</body>
</html>[/quote]
edit bold text
step5:
use this code to your js
[quote]//-------BUTTON GW-------------
var buttongw;
try {buttongw = document.createElement("div");}
catch (e) {buttongw = document.createElement("<div>");}
buttongw.innerHTML ="<div id='content_buttongw'><iframe style='allowtransparency='true' frameborder=0 width='200' height='250' scrolling='no' src='[b]URL YOUR HTML[/b]'></iframe></div>";
document.getElementById("controlPanelButtons").parentNode.appendChild(buttongw);[/quote]
[/spoiler]
edit bold text
live preview
[url]http://profiles.friendster.com/ebengemoholic[/url]
happy tweaking
2.[b]Switch Menu II[/b]
credit :
[b]dynamic drive[/b]
[b] ebeng[/b]
[spoiler]
step 1:
download in here
[url]http://www.dynamicdrive.com/dynamicindex1/xpmenuv2_2.zip[/url]
step2:
extrack and upload all to your web hosting
step3:
edit url sddm.css
[quote].navbar
{
}
.mainDiv
{
width:185px;
}
.topItem
{
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("[b]URL arrow-up-title.jpg[/b]") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
border: none;
width: 185px;
height: 25px;
color: #215dc6;
cursor:pointer;
text-indent:10px;
}
.topItemOver
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("[b]URL arrow-up-title-on.jpg[/b]") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #428eff;
cursor:pointer;
}
.topItemClose
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("[b]URL arrow-down-title.jpg[/b]") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #215dc6;
cursor:pointer;
}
.topItemCloseOver
{
text-indent:10px;
font: bold 12px tahoma,verdana,sans-serif;
letter-spacing: 0;
background: url("[b]URL arrow-down-title-on.jpg[/b]") no-repeat 0 0;
background-position:center center;
background-repeat:no-repeat;
height: 25px;
width: 185px;
color: #428eff;
cursor:pointer;
}
.dropMenu
{
font: bold 11px tahoma,verdana,sans-serif;
background-color: #d6dff7;
color: #000;
border: 1px solid #FFFFFF;
border-width: 0 1px 1px 1px;
filter:alpha(opacity=100);
padding-top:5px;
padding-bottom:5px;
}
.subMenu
{
display:block;
}
.subItem
{
margin-left:10px;
margin-top:2px;
height:18px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #215dc6;
}
.subItem a
{
margin-left:23px;
font: 11px tahoma,verdana,sans-serif;
text-decoration:none;
color: #215dc6;
}
.subItemOver
{
margin-left:10px;
margin-top:2px;
font: 11px tahoma,verdana,sans-serif;
height:18px;
color: #428eff;
}
.subItemOver a
{
margin-left:23px;
font: 11px tahoma,verdana,sans-serif;
cursor:pointer;
color: #428eff;
text-decoration:underline;
cursor:pointer;
}
.drop
{
border-left:1px solid black;
border-right:1px solid black;
}[/quote]
step 4:
create new text file and input this code HTML:
[quote]<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
<link rel="stylesheet" type="text/css" href="[b]URL sddm.css[/b]" >
</head>
<body>
<div class="navbar">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >menu 1</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:inline;">
<div class="subItem"><a href="[b]URL BEBAS" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">nama url[/b]</a></div>
<div class="subItem"><a href="[b]URL BEBAS" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">nama url[/b]</a></div>
<div class="subItem"><a href="[b]URL BEBAS onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">nama url[/b]</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Menu 2</div>
<div class="dropMenu" ><!-- -->
<div class="subMenu" style="display:none;">
<div class="subItem"><a href="http://www.friendster.com/comments.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">Kata2 lo</a></div>
<div class="subItem"><a href="http://www.friendster.com/messages.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">kata2 lo</a></div>
<div class="subItem"><a href="http://www.friendster.com/editskin.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">customize page</a></div>
</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="[b]URL xpmenuv21.js[/b]"></script>
</div>
</body>
</html>[/quote]
edit bold text:thumbsup:
and save with HTML format also named it switch menu.html
step5:
input this code to your js
[quote]//-------BUTTON GW-------------
var buttongw;
try {buttongw = document.createElement("div");}
catch (e) {buttongw = document.createElement("<div>");}
buttongw.innerHTML ="<div id='content_buttongw'><iframe style='allowtransparency='true' frameborder=0 width='200' height='250' scrolling='no' src='[b]URL HTML switch menu[/b]'></iframe></div>";
document.getElementById("controlPanelButtons").parentNode.appendChild(buttongw);[/quote]
step6:
input this code to your css
<">[/spoiler]
live preview
[url]http://profiles.friendster.com/73959550[/url]
3.[b]Slashdot Menu[/b]
credit :
[b]dynamic drive[/b]
[b] ebeng[/b]
[spoiler]
step1:
download here
[url]http://www.dynamicdrive.com/dynamicindex1/sdmenu.zip[/url]
step2:
extrack and upload all to your web hosting
step3:
edit sdmenu.css
[quote]div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url([b]bottom.gif[/b]) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url([b]title.gif[/b]) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url([b]toptitle.gif[/b]) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url([b]expanded.gif[/b]) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url([b]collapsed.gif[/b]);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url([b]linkarrow.gif[/b]) no-repeat right center;
color: #fff;
text-decoration: none;
}[/quote]
edit bold text
step4:
create new text file
[quote]<html>
<head>
<link rel="stylesheet" type="text/css" href="[b]URL sdmenu.css[/b]" />
<script type="text/javascript" src="[b]URL sdmenu.js[/b]">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library:
http://www.dynamicdrive.com
* Visit Dynamic Drive at
http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>
<body>
<div id="my_menu" class="sdmenu">
<div>
<span>menu 1</span>
<a href="[b]YOUR URL[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">[b]URL name[/b]</a>
</div>
<div>
<span>menu 2</span>
<a href="http://www.friendster.com/messages.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">kirim pesan ke ebeng</a>
</div>
<div>
<span>menu 3</span>
<a href="http://www.friendster.com/comments.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">comment ke ebeng</a>
</div>
<div>
<span>menu 4</span>
<a href="http://www.friendster.com/editskin.php?uid=[b]UID FS[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;">customize page</a>
</div>
</div>
</body>
</html>[/quote]
edit bold text
step5:
input this code to your css
<">step6:
input this code to your js
[quote]//-------BUTTON GW-------------
var buttongw;
try {buttongw = document.createElement("div");}
catch (e) {buttongw = document.createElement("<div>");}
buttongw.innerHTML ="<div id='content_buttongw'><iframe style='allowtransparency='true' frameborder=0 width='200' height='250' scrolling='no' src='[b]URL slashdot.html[/b]'></iframe></div>";
document.getElementById("controlPanelButtons").parentNode.appendChild(buttongw);[/quote]
edit bold text[/spoiler]
preview
[url]http://profiles.friendster.com/73790056[/url]
i hope u like it :rose:
don't forget give me comment
[
Last edited by EbengMaya (2008-07-19 12:59:04)