Make mootools based slidy menu item stay open on new page.

Bob Stone
Bob Stone used Ask the Experts™
on
I have a fancy sliding pic mootools based menu, the menu item will stay open when clicked on but not from page to page. The site uses Server Side Includes with the menu in the header file.

How do I fix this?

URL with SSI - http://wizard-enterprises.com/tabbed/index.shtml
URL w/o SSI  - http://wizard-enterprises.com/tabbed/index2.htm
/* the script 
var ImageMenu = new Class({
	
	initialize: function(myElements,options){
		options = Object.extend({
			onClick: Class.empty,
			start: -1,
			openWidth: 0,
			smallWidth: 0,
			itemWidth: 0,
			selected: -1,
			open: -1,
			transition: Fx.Transitions.quadOut
		}, options || {});
		
		this.myElements = myElements;
		this.options = options;
		
		options.itemWidth = myElements[0].getStyle('width').toInt();
		options.smallWidth = Math.round(((options.itemWidth*myElements.length)-options.openWidth)/(myElements.length-1));
		
		var fx = new Fx.Elements(myElements, {wait: false, duration: 400, transition: options.transition});
		
		myElements.each(function(el, i){
			el.addEvent('mouseover', function(e){
				e = new Event(e).stop();
				el.show();
			});
			
			el.addEvent('click', function(e){
				el.select();
			});
			
			el.addEvent('mouseout', function(e){
				e = new Event(e).stop();
				el.hide();
			});
			
			el.show = function(){
				var obj = {};
				obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
				myElements.each(function(other, j){
					if (other != el){
						var w = other.getStyle('width').toInt();
						if (w != options.smallWidth) obj[j] = {'width': [w, options.smallWidth]};
					}
				});
				fx.start(obj);
			};
			
			el.hide = function(){
				var obj = {};
				if(options.selected == -1){
					myElements.each(function(el,i){
						obj[i] = {'width': [el.getStyle('width').toInt(), options.itemWidth]};	
					});
				}else{
					myElements.each(function(el,i){
						if(i != options.selected){
							var w = el.getStyle('width').toInt();
							if(w != options.smallWidth){obj[i] = {'width': [w, options.smallWidth]}};
						}else{
							obj[i] = {'width': [el.getStyle('width').toInt(), options.openWidth]};
						}
					});
				}
				fx.start(obj);
			};
			
			el.select = function(){
				if(options.selected == i){options.selected = -1}else{options.selected = i}
				options.onClick(options.selected,options.open);
				options.open = options.selected;
			};
		});
		
		if(options.start != -1){
			myElements[options.start].show();
			myElements[options.start].select();
		}
	},
	
	reset: function(){
		this.options.selected = -1;
		this.options.open = -1;
		this.myElements.each(function(el, i){
			el.hide();
		});
	}
	
});


/* the html
<DIV id="kwick">
	<UL class="kwicks">
	  <a href="index.shtml"><LI class="kwick opt1"><SPAN>Home </SPAN> </LI></a>
	  <a href="index.shtml"><LI class="kwick opt2"><SPAN>About Us </SPAN>  </LI></a>
	  <a href="index.shtml"><LI class="kwick opt3"><SPAN>Portfolio </SPAN> </LI></a>
	  <a href="index.shtml"><LI class="kwick opt4"><SPAN>Templates </SPAN> </LI></a>
	  <a href="index.shtml"><LI class="kwick opt5"><SPAN>Demos </SPAN> </LI></a>
  	  <a href="index.shtml"><LI class="kwick opt6"><SPAN>Tech&nbsp;Tips </SPAN> </LI></a>
  	  <a href="contact.shtml"><LI class="kwick opt7"><SPAN>Contact&nbsp;Us </SPAN> </LI></a>
  	</UL>
</DIV><!-- kwick -->
<SCRIPT type="text/javascript">
	var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:220});
</SCRIPT>

/* the css
#kwick {
    width: 1014px;
    margin: 0 auto;
   	DISPLAY: block; 
    padding: 0 0 0 20px;
}

#kwick .kwicks {
    MARGIN: 0px; 
    HEIGHT: 85px
}

#kwick LI {
	FLOAT: left;
}

#kwick .kwick {
	BORDER-RIGHT: #fff 2px solid; 
    DISPLAY: block; 
    BACKGROUND: #fff; 
    OVERFLOW: hidden; 
    WIDTH: 110px; 
    CURSOR: pointer; 
    HEIGHT: 75px;

}
#kwick .kwick SPAN {
	color: #375880;
    background: #fff;
    font-weight: bold;
    padding: 30px 5px 0 5px;
    font-size: 15px;
    border-top: 1px  solid #92a5bc;
    border-bottom: 1px  solid #92a5bc;
    border-right: 1px  solid #92a5bc;
}
#kwick .opt1 {
	BACKGROUND: url(../images/home.png);
}
#kwick .opt2 {
	BACKGROUND: url(../images/about.png);
}
#kwick .opt3 {
	BACKGROUND: url(../images/port.png);
}
#kwick .opt4 {
	BACKGROUND: url(../images/templates.png);
}
#kwick .opt5 {
	BACKGROUND: url(../images/demo.png);
}
#kwick .opt6 {
	BACKGROUND: url(../images/tips.png);
}
#kwick .opt7 {
	BACKGROUND: url(../images/contact.png); 
    BORDER-RIGHT-WIDTH: 0px;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I figured it out.

<SCRIPT type="text/javascript">
      var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:220, start:0});
</SCRIPT>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial