just wanna share :rose:
i hope u like it :gift:
Credit:
1.[url]http://www.andrewsellick.com[/url]
2.Ebeng
ok lets start
1.first download this script
[url]http://www.andrewsellick.com/71/fancy-sliding-menu-for-mootools[/url]
2.create text file and input this code
[quote]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Mootools Fancy Sliding Tab Menu</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="[b]URL mootools.js[/b]" type="text/javascript"></script>
<script src="[b]URL tabslide.js[/b]" type="text/javascript"></script>
<style>
#accordion {
border: 1px solid #1F669B;
width: 600px;
height: 310px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
position:relative !important;
display:block;
overflow:hidden;
background-image:url([b]URL PIC[/b]);
background-repeat:no-repeat;
background-position:top left;
}
h3 {
font-size: 12px;
padding: 6px 6px 4px 35px;
margin: 0;
color:#fff;
border-bottom:1px solid #cc3300;
cursor:pointer;
display:block;
background-image:url([b]URL tab-left.gif[/b]);
background-position:top left;
background-repeat:no-repeat;
}
#visible {
background-image:url([b]URL tab-left-active.gif[/b]);
border-bottom:1px solid #cc3300;
}
.panel_body {
height:150px;
background-color:#ff0099;
display:block;
position:relative;
color:#FFFFFF;
}
.panel_body div {
padding:3px 5px;
}
.panel_container{
bottom:0px;
margin:0px;
padding:0px;
background-image:url([b]URL tab-right.gif[/b]);
background-position:top right;
background-repeat:repeat-x;
background-color:#cc3300;
}
.wrapper{
bottom:0px;
position:absolute;
}
</style>
</head>
<body>
<div id="accordion">
<div class="panel_container" id="panel1">
<h3 id="visible">Panel 1</h3>
<div id="panel1-body" class="panel_body">
<div>
<a style="text-decoration:none;" href="[b]
http://www.friendster.com[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;"><font size="4" color="ffffff" face="comic sans ms">[b]Home[/b]</font></a>
</div>
</div>
</div>
<div class="panel_container" id="panel2">
<h3>Panel 2</h3>
<div id="panel2-body" class="panel_body">
<div>
<a style="text-decoration:none;" href="[b]
http://profiles.friendster.com/user.php[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;"><font size="4" color="ffffff" face="comic sans ms">[b]Profile[/b]</font></a>
</div>
</div>
</div>
<div class="panel_container" id="panel3">
<h3>Panel 3</h3>
<div id="panel3-body" class="panel_body">
<div>
<a style="text-decoration:none;" href="[b]
http://www.friendster.com/editprofile.php[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;"><font size="4" color="ffffff" face="comic sans ms">[b]Edit Profile[/b]</font></a>
</div>
</div>
</div>
<div class="panel_container" id="panel4">
<h3>Panel 4</h3>
<div id="panel4-body" class="panel_body">
<div>
<a style="text-decoration:none;" href="[b]
http://www.friendster.com/logout.php[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;"><font size="4" color="ffffff" face="comic sans ms">[b]Logout[/b]</font></a>
</div>
</div>
</div>
<div class="panel_container" id="panel5">
<h3>Panel 5</h3>
<div id="panel5-body" class="panel_body">
<div>
<a style="text-decoration:none;" href="[b]
http://profiles.friendster.com/mayalovesebeng[/b]" onclick="window.open(this.href, 'spammers', 'resizable=yes,status=yes,scrollbars=yes,width=950,height=920'); return false;"><font size="4" color="ffffff" face="comic sans ms">[b]Friendster Maya[/b]</font></a>
</div>
</div>
</div>
</div>
<script>init();</script>
</body>
</html>[/quote]
edit color and the bold part

3.input this code in your js
[quote]// Navigation TABSLIDEV2 By.Ebeng
var navidock;
try {navidock = document.createElement("div");}
catch (e) {navidock = document.createElement("<div>");}
navidock.innerHTML = "<iframe id=\"datamain\" src=\"[b]URL HTML TABSLIDE[/b]\" width=\"630\" height=\"350px\" marginheight=\"0\" hspace=\"0\" vspace=\"0\" frameborder=\"0\" scrolling=\"no\"></iframe>";
navidock.setAttribute("style","text-align:center;padding-top:10px");
document.getElementById("logo").parentNode.appendChild(navidock);[/quote]
Live Preview [url]http://h1.ripway.com/agam12/preview.html[/url]
Last edited by EbengMaya (2008-08-22 07:03:01)