[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!!

Last edited by flint0131 on Thu Mar 05, 2009 10:25 pm; edited 14 times in total

First topic message reminder :

Quote :: Updates :
*Added ready-to-paste code
*Removed Scrollbar on IE
*Photobucket as Image Host
*I upload imageMenu.css and imageMenu.js at different host site.
*UPDATED links.
http://stoopid-ppl.com/scripts/imageMenu.css
http://stoopid-ppl.com/scripts/imageMenu.js

Is your navigation lame? boring? or whatever?
Well, Here's a good one for you! [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 40697

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 40697

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 163720

CREDITS :
http://www.phatfusion.net/imagemenu/ << kewl nav
http://www.deviantart.com << image source
a pinch of ME << for editing some of the codes ( usable for friendster profiles. )

Preview : CLICK HERE
Screenshot :

Spoiler:

Here's how to use it :

Paste this on your JS Extension.

Code:: document.getElementById("navigation").innerHTML = "<iframe src=\"http://stoopid-ppl.com/scripts/KewlNavi.html\" width=\"550\"
height=\"220\" border=\"0\" frameborder=\"0\"
scrolling=\"no\"></iframe>";

If you want to reposition it, use this CSS Code :

Code:: #navigation {
position: relative !important;
left: 130px !important; /* Edit this if you want to reposition it */
}

FOR ADVANCED USER
( If you want to make your own image )

1. Create a HTML file and name it "Navi.html" (without the quotes),
and paste this code :
then, save.

Quote :: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Navigation</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.11/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="http://stoopid-ppl.com/scripts/imageMenu.js"></script>
<link href="imageMenu.css" rel="stylesheet" type="text/css" />
<script>
// no direct access
defined('_JEXEC') or die('Restricted access');
JHTML::_('behavior.mootools');
</script>
</head>
<body bgcolor="#000000">
<div id="example">
<div id="imageMenu">
<ul>
<li class="home">
<a href="http://www.friendster.com" target="_self">Home</a>
</li>

<li class="profile">
<a href="http://profiles.friendster.com/user.php" target="_self">Profile</a>
</li>

<li class="messages">
<a href="http://www.friendster.com/messages.php" target="_self">Messages</a>
</li>
<li class="settings">
<a href="http://www.friendster.com/editaccount.php" target="_self">Settings</a>
</li>

<li class="logout">
<a href="http://www.friendster.com/logout.php" target="_self">Logout</a>
</li>
</ul>
</div>
<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{
openWidth:310, border:2,
onOpen:function(e,i){top.location=(e);}});
});
</script>
</div>

</html>
</body>

Noticed the colored text above?
Focus on that one.

2. Now, Create a CSS and name it "imageMenu.css" . (without the quotes)
Here's the code :

Quote :: /* Kewl Nav CSS */
#imageMenu {
position: relative;
width: 500px;
height: 200px;
overflow: hidden;
}

#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1000px;
}

#imageMenu ul li {
float: left;
}

#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:98px;
height: 200px;
}

#imageMenu ul li.home a {
background: url(images/home.jpg) repeat scroll 0%;
}

#imageMenu ul li.profile a {
background: url(images/profile.jpg) repeat scroll 0%;
}

#imageMenu ul li.messages a {
background: url(images/messages.jpg) repeat scroll 0%;
}

#imageMenu ul li.settings a {
background: url(images/settings.jpg) repeat scroll 0%;
}

#imageMenu ul li.logout a {
background: url(images/logout.jpg) repeat scroll 0%;
width: 310px;
}
.clear {
clear: both;
}
/*************************************************************/

^ Change the colored text above in to a URL of your desired image.

Tip : Use 320 x 200 px images.

Images I used :
[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 Home-2

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 Home-2

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 Messages-2

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 Settings-2

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 Logout-2

^ I really hope that this has no duplicate coz I'm having a hard time fixing the code.
[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 163720

.
I also made the images.

Ready to paste code :

Code:: <script src="http://www.stormpages.com/flint0131/kewl_navi.js"></script>

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 933962

NOTE : If you're going to use the Ready-to-paste code, you cannot edit the images on the navigation.
Have a nice day.

Spoiler:

@T. uhh... yeah. XD hahaha.
good job with the codes? lmao

Last edited by CHiNiTOH on Fri Mar 06, 2009 6:24 pm; edited 1 time in total

I cant post my codes omg [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 163947

ill send it to u tru pm [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 778709

AMATx:]

cool !

coll XD

its a good thing this has been updated. Thanks !

Thanks for posting :)

anyone knows where to post the codes?

the ready to paste codes.. it's not working dude [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 772320

> : I love HCG! Posts : 1 Reg-Date : 2009-05-01 Forum Warning : Contribution :

sir i made one but when i put in my profii its not working im not using hide navi
heres the html link http://www.freewebtown.com/zpank/navi.html plzz nid help!!

after having the html??? how can i activate this??

i got it kuya, thanks ... nevermind my question :)

cool.

kewl. thanks for sharing :)

why it's not working? i followed the instructions naman. i used all methods but it seems not working.

nice :))
good job.

you better view my fs
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla
http://profiles.friendster.com/lorrainecarla [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 801166

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 801166

nice!

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 47229

repu please! [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 774365

Subject: ` thanks for sharin .. Sat May 16, 2009 1:58 pm

` thanks for sharin ..

thanks for sharing [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 801166

http://www.stormpages.com/anlrt/Navi.html
look at my html^^
it has ads.

so when i open my profile it seems like this.
it has ads to. look.
https://2img.net/h/i557.photobucket.com/albums/ss15/anelele/andthis.jpg

whatshould i do?
thanks:)

thanks for sharing [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 4 801166

anelele wrote:: http://www.stormpages.com/anlrt/Navi.html
look at my html^^
it has ads.

so when i open my profile it seems like this.
it has ads to. look.
https://2img.net/h/i557.photobucket.com/albums/ss15/anelele/andthis.jpg

whatshould i do?
thanks:)

what you should do?
find another hosting site that doesn't inset ads on HTML files.

Nice job!
Thanks for the code...
I'll use it Next time...
Im not in the condition pa kasi of compiling JS codes again ehh!

Thx dude

your d men....

i try this...........

keWl dude!!!