Mootools not working

[workofart]

I am trying to use Mootools to get my websites navigations color to fade in and out on mouse-over. When the curser is over the link the color should fade to another and vice versa. The demo of the code worked fine. Everything on the demo was copied over exactly how they had it, but I cant figure out why it doesnt work. The URL is www.portfoliobyart.com/h20

Thanks in advance for the help.

[codeexploiter]

I have made some changes in your source code and the code started to work.

1. You should include the JS files in the following order. Otherwise what happens is the browser will try to do something based on Mootools library before loading the mootools library file.

<script type="text/javascript" src="mootools.js"></script>     
	<script type="text/javascript" src="demo.js"></script>

2. The changes in the HTML file. I have highlighted the changes. I have removed id="link" because there should not be duplicate id value in the DOM.

<div class="nav">
    	<a href="#" title=""><div class="links"><p>HOME</p></div></a>
      <a href="#" title=""><div class="links"><p>ABOUT COMPANY</p></div></a>
      <a href="#" title=""><div class="links"><p>NEWS/PRESS</p></div></a>
      <a href="#" title=""><div class="links"><p>PRODUCT DETAILS</p></div></a>
      <a href="#" title=""><div class="links"><p>WHERE TO BUY</p></div></a>
      <a href="#" title=""><div class="links"><p>GLOBAL OPPORTUNITIES</p></div></a>
      <a href="#" title=""><div class="links"><p>TESTIMONIALS</p></div></a>
    </div>

3. The change in CSS file style.css. I have replace #link with .links here. So this CSS rules will be applicable to the menu items. Make sure that you don't use this class on anywhere else unless you want to create the same effect as the menu items.

.start #header .nav .links{
		margin:auto 2px;
		padding:2px 6px 4px 6px;
		height:25px;
		width:auto;
		float:left;
		background-color: #0a9150;
		color:#FFFFFF;
		text-decoration:none;
		font-size:12px;
		border-right:1px solid black;
	}

4. I have changed some of the code that you've used in your web page in demo.js

window.addEvent('domready', function() {    
    divs = $(document.body).getElements('div.links'),
    color;
    divs.set('opacity', 0.5).addEvents({
        'mouseenter': function() {
            color = this.getStyle('backgroundColor');
            this.morph({
                'opacity': 1,
                'background-color': '#000'
            });
        },
        'mouseleave': function() {
            this.morph({
                opacity: 0.5,
                backgroundColor: color
            });
        }
    });
	//I HAVE COMMENTED THE CODE SNIPPET BELOW THIS BECAUSE THERE IS NO ELEMENT WITH AN id myOtherElement
	/*$('myOtherElement').addEvents({
		'mouseenter': function(){
			// Always sets the duration of the tween to 1000 ms and a bouncing transition
			// And then tweens the height of the element
			this.set('tween', {
				duration: 1000,
				transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
			}).tween('height', '150px');
		},
		'mouseleave': function(){
			// Resets the tween and changes the element back to its original size
			this.set('tween', {}).tween('height', '20px');
		}
	});*/
});

After making these changes I am able to make the menu color changes correctly.

Plz let me know if you need any more assistance about this. I am not a mootool developer so there may be a more simple method for doing this also.