[b]LIVE PREVIEW:[/b]

[url=http://profiles.friendster.com/asshoLe018]PROFILE TESTER[/url]
[b]uhm, guyz! Live Preview is now avaiLabLe...[/b]
[b]SCREENSHOT: [/b]

[img]http://www.geocities.com/for_you_018/mainnav_preview.jpg[/img]
[b]STEP 1: [/b]

copy the given code beLow and then paste it inside you CSS Extension! and then save.
[quote]/* Navigation Style */
.shadetabs {
MARGIN-BOTTOM: 0px; BORDER-BOTTOM: gray 1px solid;
}
.shadetabs UL {
PADDING-RIGHT: 0px; MARGIN-TOP: 1px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 3px; FONT: bold 12px Verdana; MARGIN-LEFT: 0px; PADDING-TOP: 3px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left;
}
.shadetabs LI {
DISPLAY: inline; MARGIN: 0px;
}
.shadetabs LI A {
BORDER-RIGHT: #778 1px solid; PADDING-RIGHT: 7px; BORDER-TOP: #778 1px solid; PADDING-LEFT: 7px; BACKGROUND: url(http://www.geocities.com/for_you_018/shade.gif) white repeat-x left top; PADDING-BOTTOM: 3px; BORDER-LEFT: #778 1px solid; COLOR: #2d2b2b; MARGIN-RIGHT: 3px; PADDING-TOP: 3px; BORDER-BOTTOM: #778 1px solid; TEXT-DECORATION: none;
}
.shadetabs LI A:visited {
COLOR: #2d2b2b;
}
.shadetabs LI A:hover {
COLOR: #2d2b2b; TEXT-DECORATION: underline;
}
.shadetabs LI.selected {
}
.shadetabs LI.selected A {
BACKGROUND-IMAGE: url(http://www.geocities.com/for_you_018/shadeactive.gif); BORDER-BOTTOM-COLOR: white;
}
.shadetabs LI.selected A:hover {
TEXT-DECORATION: none;
}
/* dropdown menu 1 */
.dropmenudiv1 {
BORDER-RIGHT: #918d8d 1px solid;
BORDER-TOP: #918d8d 0px solid;
Z-INDEX: 1000;
VISIBILITY: hidden;
FONT: 12px/18px Verdana;
BORDER-LEFT: #918d8d 1px solid;
WIDTH: 200px;
BORDER-BOTTOM: #918d8d 0px solid;
TOP: 0px;
MARGIN-LEFT: 57px;
BACKGROUND-COLOR: white;
}
.dropmenudiv1 A {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
WIDTH: auto;
COLOR: #000;
TEXT-INDENT: 3px;
PADDING-TOP: 2px;
MARGIN-TOP: 0px;
BORDER-BOTTOM: #918d8d 1px solid;
TEXT-DECORATION: none;
}
HTML .dropmenudiv1 A {
WIDTH: 100%;
}
.dropmenudiv1 A:hover {
background-color: #ccc;
}
/* dropdown menu 2 */
.dropmenudiv2 {
BORDER-RIGHT: #918d8d 1px solid;
BORDER-TOP: #918d8d 0px solid;
Z-INDEX: 1000;
VISIBILITY: hidden;
FONT: 12px/18px Verdana;
BORDER-LEFT: #918d8d 1px solid;
WIDTH: 200px;
BORDER-BOTTOM: #918d8d 0px solid;
MARGIN-LEFT: 215px;
BACKGROUND-COLOR: white;
}
.dropmenudiv2 A {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
WIDTH: auto;
COLOR: #000;
TEXT-INDENT: 3px;
PADDING-TOP: 2px;
MARGIN-TOP: 0px;
BORDER-BOTTOM: #918d8d 1px solid;
TEXT-DECORATION: none;
}
HTML .dropmenudiv2 A {
WIDTH: 100%;
}
.dropmenudiv2 A:hover {
background-color: #ccc;
}
#dropmenu2 {
MARGIN-TOP: -184px;
}
/* dropdown menu 3 */
.dropmenudiv3 {
BORDER-RIGHT: #918d8d 1px solid;
BORDER-TOP: #918d8d 0px solid;
Z-INDEX: 1000;
VISIBILITY: hidden;
FONT: 12px/18px Verdana;
BORDER-LEFT: #918d8d 1px solid;
WIDTH: 200px;
BORDER-BOTTOM: #918d8d 0px solid;
TOP: 0px;
MARGIN-LEFT: 358px;
BACKGROUND-COLOR: white;
}
.dropmenudiv3 A {
PADDING-RIGHT: 0px;
DISPLAY: block;
PADDING-LEFT: 0px;
FONT-WEIGHT: bold;
PADDING-BOTTOM: 2px;
WIDTH: auto;
COLOR: #000;
TEXT-INDENT: 3px;
PADDING-TOP: 2px;
MARGIN-TOP: 0px;
BORDER-BOTTOM: #918d8d 1px solid;
TEXT-DECORATION: none;
}
HTML .dropmenudiv3 A {
WIDTH: 100%;
}
.dropmenudiv3 A:hover {
background-color: #ccc;
}
#dropmenu3 {
MARGIN-TOP: -115px;
}[/quote]
[b]STEP 2:[/b]

create a new text fiLe, use (notepad) and then copy the given beLow and then paste inside the notepad.
[quote]//navigation styLe
document.getElementById("marketing_bg").innerHTML = "<div id='shademenu' class='shadetabs'>"+
"<ul>"+
"<li><a href='http://www.friendster.com/'>Home</a></li>"+
"<li><a href='http://www.friendster.com/user.php' rel='dropmenu1' rev='testfield'>Profile</a></li>"+
"<li><a href='http://www.friendster.com/widget_myapps.php'>My Apps</a></li>"+
"<li><a href='http://www.friendster.com/friends.php' rel='dropmenu2'>My Connections</a></li>"+
"<li><a href='http://www.friendster.com/explore.php' rel='dropmenu3'>Explore</a></li>"+
"<li><a href='http://www.friendster.com/gallery.php'>Search</a></li>"+
"<li><a href='http://olx.friendster.com/gateway_cobranded.php?country=PH'>Classifieds</a></li>"+
"<li><a href='http://olx.friendster.com/gateway_cobranded.php?country=PH&target=jobs'>Jobs</a></li>"+
"<li><a href='http://www.friendster.com/logout.php'>Logout</a></li>"+
"</ul>"+
"</div>"+
"<div id='dropmenu1' class='dropmenudiv1'>"+
"<a href='http://www.friendster.com/editprofile.php'>Edit Profile</a>"+
"<a href='http://www.friendster.com/viewphotos.php'>Photos</a>"+
"<a href='http://widgets.friendster.com/meezavatars?app=games'>Games</a>"+
"<a href='http://www.friendster.com/review.php'>Reviews</a>"+
"<a href='http://www.friendster.com/blogs.php'>Blogs</a>"+
"<a href='http://www.friendster.com/featuredfriends.php'>Featured Friends</a>"+
"<a href='http://www.friendster.com/video.php'>Video</a>"+
"<a href='http://www.friendster.com/bulletinboard.php'>Bulletin Board</a>"+
"</div>"+
"<div id='dropmenu2' class='dropmenudiv2'>"+
"<a href='http://www.friendster.com/friends.php'>Friends</a>"+
"<a href='http://www.friendster.com/schools.php'>Schools</a>"+
"<a href='http://www.friendster.com/friends.php?action=spusers'>I'm a fan of...</a>"+
"<a href='http://www.friendster.com/bookmarks.php'>Bookmarks</a>"+
"<a href='http://www.friendster.com/group/mygroup.php'>Groups</a>"+
"</div>"+
"<div id='dropmenu3' class='dropmenudiv3' style='width: 150px;'>"+
"<a href='http://www.friendster.com/userlist.php?list=newusers'>People</a>"+
"<a href='http://www.friendster.com/photolist.php?list=mostrecen'>Photos</a>"+
"<a href='http://www.friendster.com/video.php'>Video</a>"+
"<a href='http://www.friendster.com/userlist.php?list=feat_profile'>Featured Fan Profiles</a>"+
"<a href='http://www.friendster.com/widgetdirectory.php'>Applications</a>"+
"</div>";[/quote]
[b]STEP 3:[/b]

and then save your fiLe as [b]navigationstyLetr.js[/b], and then upLoad your fiLe hosting, eg. ripway or geocities...
[b]STEP 4:[/b]

now, copy the URL of ur [b]navigationstyLetr.js[/b] and then paste it inside the given code beLow.
[quote]//navigation style tricks
var navstyLetr = document.createElement("script");
navstyLetr.type = "text/javascript";
navstyLetr.src = "[b]URL OF YOUR NAVIGATION STYLE JS[/b]";
document.getElementsByTagName("head")[0].appendChild(navstyLetr);
[b]// NOTHING TO EDIT HERE![/b]
//navigation style tricks
var navtr = document.createElement("script");
navtr.type = "text/javascript";
navtr.src = "http://www.geocities.com/for_you_018/dropdowntab.js";
document.getElementsByTagName("head")[0].appendChild(navtr);[/quote]
after that, copy the two given code above, paste it inside your JS fiLes...
[b]STEP 5:[/b]

now, Let's proceed inside your onLoadhandLer! just copy the given code beLow and then paste!
[quote]//for onLoadhandLer script
tabdropdown.initializetabmenu("shademenu")[/quote]
[b]NOTE:[/b] this is how you paste the code inside your onLoadhandLer: see the code beLow!
[quote]if (!attachOnLoadHandler(function(){onLoad();})) window.onload = function(){onLoad();};
function onLoad()
{
[b]//for onLoadhandLer script
tabdropdown.initializetabmenu("shademenu")[/b]
}[/quote]
and then save, your done! that's aLL foLks...haha

...enjoy the new styLe for your main navigation!
[b]NOTE:[/b] if you want to use this trick, u need to hide your oLd navigation! just copy the code beLow and paste it inside your CSS fiLes:
[quote]#mainnav {
display: none !important;
}[/quote]
PROBLEM? uhm, just PM me!
gudLuck!
Last edited by irishandme (2008-08-03 12:00:16)