Mootools Elastic Menu
A menu with easing collapse and expand mouse over effect. A javascript framework "Mootools" has been used to built this menu. It is really simple to look and has an easing animation of menu items and sub menus when mouse is moved over each item.
How to use
First of all upload the "mootools.js" in your server. Then add the line below in your page between <head> and </head>
<script src="mootools.js" type="text/javascript" language="javascript"></script>
After doing this also add the style code between <head> and </head> or merge them in your css file. If you want to change the look of the menu you have to this code
<style type="text/css">
<!--
#container
{
background: #ffffff;
height: 600px;
width: 980px;
margin-right: auto;
margin-left: auto;
}
#btmenu
{
color: #666666;
background: #000000;
height: 200px;
width: 400px;
margin-right: auto;
margin-left: auto;
font-size: 11px;
position: absolute;
margin-top: 500px;
}
#container #menu
{
height: auto;
width: 350px;
float: left;
}
body
{
overflow: auto;
background: #ffffff;
color: #666666;
font-family:"Trebuchet MS", Arial, Verdana
}
#container h1
{
font-size: 16px;
}
#container #menu li
{
display: block;
list-style-type: none;
}
#container #menu a
{
font-size: 14pt;
color: #666666;
padding-right: 10px;
padding-left: 10px;
line-height: 30px;
text-decoration: none;
background: #DDDDDD;
height: 30px;
width: 180px;
display: block;
outline:0;
margin-bottom: 5px;
}
.sub
{
font-size: 10pt;
color: #666666;
padding-right: 10px;
padding-left: 10px;
line-height: 30px;
text-decoration: none;
background: #ff0000;
height: 30px;
width: 180px;
display: block;
outline:0;
margin-bottom: 5px;
}
#container #menu a:hover
{
color: #000000;
}
#popup
{
float: right;
width: 300px;
border: thin solid #666666;
height: auto;
background: #666666;
visibility:hidden;
font: 11.333px Arial, Helvetica, sans-serif;
padding: 10px;
margin-right: 20px;
}
#container #menu .accordion a
{
color: #FFCC00;
}
#container #menu .accordion a:hover
{
color: #000000;
}
-->
</style>
After this add the html code below in the place where you want to add the menu. To add new menu or submenu or to edit existing one you have to edit this part.
<div id="container">
<div id="menu">
<ul>
<li><a style="background: transparent url(bg.jpg) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-left: 0px;" href="#" title="" class="toggler">Flash</a></li>
<div style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px; visibility: hidden; opacity: 0; height: 0px;" class="accordion">
<a class="sub" href="http://www.dscripts.net/scripts/flash/dguestbook/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">DGUESTBOOK</a>
<a class="sub" href="http://www.dscripts.net/scripts/flash/simple-flash-guestbook/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Simple Flash Guestbook</a>
<a class="sub" href="http://www.dscripts.net/scripts/flash/shout-n-loud/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Shout N Loud</a>
<a class="sub" href="http://www.dscripts.net/scripts/flash/flash-form-mail/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Flash Form Mail</a>
</div>
<li><a style="background: transparent url(bg.jpg) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-left: 0px;" href="#" class="toggler">Javascripts</a></li>
<div style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px; visibility: hidden; opacity: 0; height: 0px;" class="accordion">
<a class="sub" href="http://www.dscripts.net/scripts/javascript/mootools-elastic-menu/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Mootools Elastic Menu</a>
<a class="sub" href="http://www.dscripts.net/scripts/javascript/navigation-menu/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Navigation Menu</a>
<a class="sub" href="http://www.dscripts.net/scripts/javascript/form-validator/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Form Validator</a>
<a class="sub" href="http://www.dscripts.net/scripts/javascript/disable-text-select/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Disable Text Select</a>
</div>
<li><a style="background: transparent url(bg.jpg) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-left: 0px;" href="#" class="toggler">PHP</a></li>
<div style="border-top: medium none; border-bottom: medium none; overflow: hidden; padding-top: 0px; padding-bottom: 0px; visibility: hidden; opacity: 0; height: 0px;" class="accordion">
<a class="sub" href="http://www.dscripts.net/scripts/php/daily-poll/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Daily Poll</a>
<a class="sub" href="http://www.dscripts.net/scripts/php/basic-hit-counter/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Basic Hit Counter</a>
<a class="sub" href="http://www.dscripts.net/scripts/php/random-image/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Random Image</a>
<a class="sub" href="http://www.dscripts.net/scripts/php/thumbnail-generator/" title="index.php" style="font-size:11px; padding: 0px 0px 0px 30px; background:#FFFFFF; color:#666666; margin: 0px;">Thumbnail Generator</a>
</div>
<li><a style="background: transparent url(bg.jpg) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-left: 0px;" href="http://www.dscripts.net">DSCRIPTS</a></li>
<li><a style="background: transparent url(bg.jpg) repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-left: 0px;" href="http://www.dscripts.net/contact.html">Contact</a></li>
</ul>
</div>
</div>
Just after this code add this javascript code in your page. This code is written using mootools framework that controls the menu. To know how this works please view documents at http://www.mootools.net
<script language="javascript" type="text/javascript">
window.onload=function(){
$$('#menu a').each(function(el) {
el.addEvent('mouseenter',function(){
p = el.innerHTML;//.toUpperCase();
el.innerHTML = p;
myEffect = el.effect('margin-left', {duration: 100,transition: Fx.Transitions.linear, wait: true}).start('10','30');
})
el.addEvent('mouseleave',function(){
p = el.innerHTML;//.toLowerCase();
el.innerHTML = p;
myEffect = el.effect('margin-left', {duration: 800,transition: Fx.Transitions.Bounce.easeOut, wait: true}).start('30','0');
})
})
myStretch = document.getElementsByClassName('toggler');
myStretcher = document.getElementsByClassName('accordion');
myStretcher.each(function(el){
el.style.display = '';
});
var ac = new Fx.Accordion(myStretch,myStretcher,
{
alwaysHide: true,
start : 'all-closed',
height: true,
opacity : true
});
}
st = document.getElementsByClassName('toggler2');
stc = document.getElementsByClassName('accordion2');
stc.each(function(el){
el.style.display = '';
});
var acc = new Fx.Accordion(st,stc,
{
alwaysHide: true,
start : 'all-closed',
opacity : true
});
</script>
Source Files:
