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

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

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

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

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

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

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

what if i don't like the pictures? how will i change it?

^ Your Highness, read the For Advance Users

nice dude!thx for sharin