Link to home
Start Free TrialLog in
Avatar of Bob Stone
Bob StoneFlag for United States of America

asked on

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

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

ASKER CERTIFIED SOLUTION
Avatar of Bob Stone
Bob Stone
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial