[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

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!! 40697

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! 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!! Home-2

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

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

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

[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! 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!! 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!! 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.

im mine 5 am now ahaha ^,^ Great post i love it keep it up ^,^ lemme try this one ^,^

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

_______________________________________
•Mii Frindster•

coOl one dude... kip on posting new stuffs.. ^_^

i'll try this later..

kewl tiga in mine 7 na :]

CREDITS : http://phatfusion.net/imagemenu/

anyway , set 7 users can also use this :

Code:: document.write('<iframe src=\"http://h1.badwaresite.www/murdermydolly/kewl_nav/index.html\" width=\"550\" height=\"220\" border=\"0\" frameborder=\"0\"></iframe>');

ps. ripway is not a good host. youll run out of bandwidth in no time . :)

Subject: hoy Tue Jan 06, 2009 10:36 am

plz put the credits...

Oh~ I'm sorry I forgot to put some credits. I was so sleepy this morning. Haha.

TOPIC EDITED

Thanks fer sharing dude .... nice!

i love it

Nice trick dude.. :]] thank's for sharing this here.. :P

nice

bro! is this compatible in internet explorer?

im gonna use this trick.. thanks for sharing !

compatible to all browsers?
anyways,thanks fer sherin it here!

whoa!..cool!
nce job!
lmao

not working.. already tried everything..
i even tried to use IE and mozilla. *sigh*

^ then how come It works on my profile?
maybe there's something wrong on your code. ^_^ hehe.

This is compatible on both IE7 and FF

uhmm.i just want to ask
after putting the imagemenu.css
wat am i gonna do next?
sorry i think that will be a silly question.
haha.

save the HTML file as "nav.html",
then upload it on a hosting site,
and get the URL of the HTML file.
copy the URL and past it in this code :

Code:: document.getElementById("navigation").innerHTML="<iframe src=\"URL of the HTML file here\" width=\"550\" height=\"220\" border=\"0\" frameborder=\"0\"></iframe>";

then, lastly, paste it in your JS Extension. :D

thnks ferr sharin.. ITS NYYC! :]

i admired your effort and the trick you shared to us..
keep up the goodwork buddy^^
btw..please update your preview buddy^^seems its not working [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! 192262

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

and it seems that your images are no longer working bandwith exceeded perhaps ^^

Subject: awtxx Wed Jan 07, 2009 11:11 am

nu un image menu css pnu i generate [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! 436552

[ UPDATED ]

gee!thnx flint :)
u really did a lot of effort to this.

it finally worked.. im using mozilla, then i tried it on IE. whew, but it has a scroll bar with it.. oh well

does it work with SET8? or any sets?

anyway thanks for sharing this, its really cool. victory

EDIT:

Now i understand.
the original navigation must be present because it will replace the original navigation.. ayt?