[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 2 40697

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

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

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

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

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

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

lab it.. ^^.. nice pow.. kaya lan..
pawang hirap gawin.. ahihi
tnx for sharing.. flowers

GummyBearXD wrote:: 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.

EDIT:

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

[ UPDATED ]

Oh, sorry. I forgot IE users. Hehe.
I already Updated the codes, No more scrollbars on IE now. :D

I've seen your profile, It's so cool. [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 2 47229

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

@lhaedybratz : It's easy lng po.
Just paste this code on your JS Extension,

Code:: document.getElementById("navigation").innerHTML="<iframe src=\"http://h1.badwaresite.www/murdermydolly/KewlNavi.html\" width=\"550\" height=\"220\" border=\"0\" frameborder=\"0\" scrolling=\"no\"></iframe>";

make sure you didn't remove #navigation Id on your CSS Extension.

dance

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

i really love to try this. but i dont know how to use js. :(
do you have ready to paste code of this.? THANKS.

cant understand. [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 2 774365

[ UPDATED ]
Added ready-to-paste code.

You can still reposition it using the CSS code I posted.

Ya'll have a nice day. :D

dude.. where will that code appear?...

im curious bcause im using "main data only" set... ;]

wew...coo0oo0l..hihi..tnx for sharin..dude.. idol

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

sooper thank you. :D

^ thnx. :D

romar wrote:: dude.. where will that code appear?...

im curious bcause im using "main data only" set... ;]

make sure you didn't hide #navigation ID on your CSS code.
coz the code will appear on your navigation area.

hmm.
question.
how can we use it in SET 7? dude. :D

^Just make sure the set you're using didn't remove the #navigation.
:D

that is the only solution for it?

^Yes. View the .css extension of the set that you are using, and make sure you remove the #navigation ID.

^yup i know.
i just want to put it inside my media
but its not possible tnx for sharing nlng. :)

ahw. Ohw~ So you mean you want to put it inside your media box?
Yeah. It's possible.

Use this one :

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

But i think it's filtered? Idk, just try it. ^_^

Nice job !
Keep up the good work !
[Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 2 192262

dude, can I use GIF in this trick? (i mean, the moving ones)

^yup.

Subject: pano po gagawin sa js??????/ Sat Jan 17, 2009 6:59 pm

pano po gagawin sa js??????

pagkataposgawin ng imagemenu.css ano na po gagawin????

^paste the link of your imageMenu.css in your Navi.html

Subject: not working!! Sun Jan 18, 2009 11:50 am

♫ hi!!
♫ mootools is not working!!
♫ haiz!!
♫ happy3friends_12@yahoo.com
♫ e mail qoh yan!!tingnan nyo powh!!

try this later .:]

DON'T USE THIS YET..
I'm going to update this one.
I'm going to fix it. Have a nice day.

there's something wrong with your hosting site.
it's still working for me, but it's not working for the others.
I suggest you use other hosting site [Mootools] Replace your Navigation w/ a Kewl One. [ UPDATED ] Hottest!! - Page 2 35724

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

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