Navagation bar overflow into another frame

[Liquid Snake]

I have created a navagation bar in Xara Webstyle and it uses submenu features that are in a .js file.

I intergrated the navagation bar into my website in Dreamweaver. But here is the problem:

I am using frames and I want the navagation bar when highlighted to display the submenu features in the below frame.

Is there some sort of script that allows a navagation bar's submenu to overflow into another frame?
I have seen it before in some website like gamer's sites.

[transmothra]

1) go to site.
2) steal code by looking at source.
3) give credit where credit is due.

it can be done, but it's not incredibly easy to make it look nice, just because you're using frames, which are NEVER pixel-perfect across browsers. and you will definitely WANT to use pixel widths (as opposed to percentages) for something like that. in fact, use pixel widths throughout the entire nav frame that the main portion of the menu is on.

[ucm]

what you could do is create a table for each submenu you want and put each one in a div layer...

then when the user moves their mouse over one of the top main menu items, have a function show the div ( submenu ) you want and hide all the other divs ( sub menus )

something along the lines of:

the submenus ( put these in the submenu html file ):

<div id="1" style="display:none;">
<table width="100%" height="100%">
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
</table>
</div>


<div id="2" style="display:none;">
<table width="100%" height="100%">
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
</table>
</div>


<div id="3" style="display:none;">
<table width="100%" height="100%">
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
<tr>
<td>
<a target="mainFrameNameHere" href="blah.html">Item</a>
</td>
</tr>
</table>
</div>




navigation links ( put these in the navigation html file ):

<a onmouseover="top.frames.mySideMenuFrameNameHere.goSubMenuChange(1)">File</a>
<a onmouseover="top.frames.mySideMenuFrameNameHere.goSubMenuChange(2)">File</a>
<a onmouseover="top.frames.mySideMenuFrameNameHere.goSubMenuChange(3)">File</a>


the function ( put this in the navigation html file ):

function goSubMenuChange(theSubMenuToShow){
tsmts=theSubMenuToShow


document.getElementById(tsmts).style.display=''


for (ii=0;ii<3;ii++){
if (ii==tsmts){
//Do nothing cuz this is the submenu we Want to display
}else{
document.getElementById(ii).style.display='none'
}
}
}



Bare in mind that I haven't had time to test this yet and since the getelementbyid line uses the 'style' object, this example will only work in ie and browsers running the ie engine...nn likes accessing the style object in different ways ( IF i remember correctly, I don't work much with nn )


try it!

[Liquid Snake]

I dont quite understand what you mean

but I have opened the .js files

there are two one named xaramenu.js and another navbar.js

and there is something about frames in it: have a look:

----------------------------

if(typeof(loc)=="undefined"||loc==""){var loc="";if(document.body&&document.body.innerHTML){var tt=document.body.innerHTML.toLowerCase();var last=tt.indexOf("navbar.js\"");if(last>0){var first=tt.lastIndexOf("\"",last);if(first>0&&first<last)loc=document.body.innerHTML.substr(first+1,last-first-1);}}}

var bd=0
document.write("<style type=\"text/css\">");
document.write("\n<!--\n");
document.write(".navbar_menu {border-color:black;border-style:solid;border-width:"+bd+"px 0px "+bd+"px 0px;background-color:#847b69;position:absolute;left:0px;top:0px;visibility:hidden;}");
document.write("a.navbar_plain:link, a.navbar_plain:visited{text-align:left;background-color:#847b69;color:#ffffff;text-decoration:none;border-color:black;border-style:solid;border-width:0px "+bd+"px 0px "+bd+"px;padding:2px 0px 2px 0px;cursor:hand;display:block;font-size:8pt;font-family:Arial, Helvetica, sans-serif;}");
document.write("a.navbar_plain:hover, a.navbar_plain:active{background-color:#b5ff00;color:#000000;text-decoration:none;border-color:black;border-style:solid;border-width:0px "+bd+"px 0px "+bd+"px;padding:2px 0px 2px 0px;cursor:hand;display:block;font-size:8pt;font-family:Arial, Helvetica, sans-serif;}");
document.write("a.navbar_l:link, a.navbar_l:visited{text-align:left;background:#847b69 url("+loc+"navbar_l.gif) no-repeat right;;color:#ffffff;text-decoration:none;border-color:black;border-style:solid;border-width:0px "+bd+"px 0px "+bd+"px;padding:2px 0px 2px 0px;cursor:hand;display:block;font-size:8pt;font-family:Arial, Helvetica, sans-serif;}");
document.write("a.navbar_l:hover, a.navbar_l:active{background:#b5ff00 url("+loc+"navbar_l2.gif) no-repeat right;color: #000000;text-decoration:none;border-color:black;border-style:solid;border-width:0px "+bd+"px 0px "+bd+"px;padding:2px 0px 2px 0px;cursor:hand;display:block;font-size:8pt;font-family:Arial, Helvetica, sans-serif;}");
document.write("\n-->\n");
document.write("</style>");

var fc=0x000000;
var bc=0xb5ff00;
if(typeof(frames)=="undefined"){var frames=0;}

startMainMenu("navbar_left.gif",21,6,2,0,0)
mainMenuItem("navbar_b1",".gif",21,77,"javascript:;","","Home",2,2,"navbar_plain");
mainMenuItem("navbar_b2",".gif",21,77,"javascript:;","","Something",2,2,"navbar_plain");
mainMenuItem("navbar_b3",".gif",21,77,"javascript:;","","anything",2,2,"navbar_plain");
mainMenuItem("navbar_b4",".gif",21,77,"javascript:;","","Welcome",2,2,"navbar_plain");
mainMenuItem("navbar_b5",".gif",21,77,"javascript:;","","example",2,2,"navbar_plain");
endMainMenu("navbar_right.gif",21,6)

startSubmenu("navbar_b2","navbar_menu",77);
submenuItem("anthing","javascript:;","","navbar_plain");
endSubmenu("navbar_b2");

startSubmenu("navbar_b1_1","navbar_menu",120);
submenuItem("sub menu can be here","javascript:;","","navbar_plain");
endSubmenu("navbar_b1_1");

startSubmenu("navbar_b1","navbar_menu",77);
mainMenuItem("navbar_b1_1","hello",0,0,"javascript:;","","",1,1,"navbar_l");
endSubmenu("navbar_b1");

loc="";


--------------------------------------

I have changed the frames bit to 1 and it does'nt work PLEASE HELP!

the xaramenu.js looks like this:

---------------------------------------


// ©Xara Ltd 2002
var ma=new Array();var mx=new Array();var my=new Array();var mc=new Array();var mal=0;var main=0;var menuw=200;var psrc=0;var pname="";var al="";var NS6=(!document.all&&document.getElementById);var NS4=(!document.getElementById);var IE5=(!NS4&&!NS6&&navigator.userAgent.indexOf('MSIE 5.0')!=-1);if(navigator.userAgent.indexOf('Opera')!=-1)NS4=1;function startMainMenu(file,h,w,dir,space,align){if(w>0)menuw=w;main=dir;if(main==1||main==2)document.write("<table border=\"0\" cellspacing=\""+space+"\" cellpadding=\"0\">");if(file!=""){al="";if(align==1)al=" align=\"right\"";if(align==2)al=" align=\"center\"";if(main==1||main==2)document.write("<tr><td"+al+">");document.write("<img src=\""+loc+file+"\" border=\"0\"");if(h>0)document.write(" height=\""+h+"\"");if(w>0)document.write(" width=\""+w+"\"");document.write(" />");if(main==1||main==2)document.write("</td>");if(main==1)document.write("</tr>");if(main==3)document.write("<br></br>");}}function endMainMenu(file,h,w){if(file!=""){if(main==1)document.write("<tr>");if(main==1||main==2)document.write("<td"+al+">");document.write("<img src=\""+loc+file+"\" border=\"0\"");if(h>0)document.write(" height=\""+h+"\"");if(w>0)document.write(" width=\""+w+"\"");document.write(" />");if(main==1||main==2)document.write("</td></tr>");}if(main==1||main==2)document.write("</table>");main=0;}function mainMenuItem(name,ext,h,w,url,tar,alt,dir,state,s){if(NS4&&main==0)return;var isgraphic=ext.charAt(0)==".";if(main==1)document.write("<tr>");if(main==1||main==2)document.write("<td"+al+">");document.write("<a ");if(url!=""||!isgraphic)document.write("href=\""+url+"\" ");if(tar!="")document.write("target=\""+tar+"\" ");document.write("onmouseout=\"");if(dir>0)document.write("tidyMenu(event);");document.write("\" onmouseover=\"");if(dir>0)document.write("openMenu(event, '"+name+"',"+dir+","+bc+","+fc+");");if(state>1&&isgraphic){document[name+"_over"]=new Image();document[name+"_over"].src=loc+name+"_over"+ext;document.write("setGraphic(event, '"+loc+name+"_over"+ext+"');");}document.write("return false;\"");if(!isgraphic)document.write(" class=\""+s+"\" style=\"width:"+(w>0?w:menuw)+"px\"");document.write(">");if(isgraphic){document.write("<img src=\""+loc+name+ext+"\" border=\"0\"");if(h>0)document.write(" height=\""+h+"\"");if(w>0)document.write(" width=\""+w+"\"");if(alt!="")document.write(" alt=\""+alt+"\"");document.write(" />");}else{document.write("&nbsp;"+ext+"&nbsp;");}document.write("</a>");if(main==1||main==2)document.write("</td>");if(main==1)document.write("</tr>");if(main==3)document.write("<br></br>");}function startSubmenu(name,style,sw){if(NS4)return;if(sw>0)menuw=sw;document.write("<div id=\""+name+"\" class=\""+style+"\" style=\"width:"+(menuw+(NS6?bd*2:0))+"px\">");}function endSubmenu(name){if(NS4)return;document.write("</div>");if(!NS6)document.getElementById(name).onmouseout=tidyMenu;}function submenuItem(text,url,tar,s){if(NS4)return;if(text.charAt(0)=='<')document.write(text);else{document.write("<a ");if(url!="")document.write("href=\""+url+"\" ");if(tar!="")document.write("target=\""+tar+"\" ");document.write("class=\""+s+"\" style=\"width:"+menuw+"px\">&nbsp;"+text+"&nbsp;</a>");}}function setGraphic(event,name){if(NS4)return;psrc=(NS6)?event.target:event.srcElement;pname=psrc.src;if(NS6) event.target.src=name;else event.srcElement.src=name;}function openMenu(event,id,pos,bc,fc){if(NS4)return;var el,x,y;if(mal>0){el=document.getElementById(ma[mal-1]);if(mx[mal-1]!=el.offsetLeft||my[mal-1]!=el.offsetTop){el.style.left=mx[mal-1];el.style.top=my[mal-1];}tidyMenu(event);}if(NS6){if(mal==0){x=event.target.x-bd;y=event.target.y;dx=event.target.offsetWidth;dy=event.target.offsetHeight;if(typeof(event.target. x)=="undefined"){x=event.target.offsetLeft;y=event.target.offsetTop;}}else{var p=event.target;if(p.nodeName!="A"&&p.parentNode.nodeName=="A")p=p.parentNode;dx=p.offsetWidth;dy=p.offsetHeight;el=document.getElementById(ma[mal-1]);x=el.offsetLeft-bd;y=el.offsetTop+p.offsetTop;}}else{x=event.clientX-event.offsetX+document.body.scrollLeft-document.body.clientLeft;y=event.clientY-event.offsetY+document.body.scrollTop-document.body.clientTop-bd;dx=event.srcElement.offsetWidth;dy=event.srcElement.offsetHeight;if(mal>0)x-=2*bd;}el=document.getElementById(id);if(el&&el.style.visibility!="visible"){if(pos==1){x+=dx;el.style.left=x-el.offsetWidth;el.style.top=y;nspeed=el.offsetWidth/frames;}else if(pos==2){y+=dy;el.style.left=x;el.style.top=y-el.offsetHeight;nspeed=el.offsetHeight/frames;}else if(pos==3){x-=el.offsetWidth;el.style.left=x+el.offsetWidth;el.style.top=y;nspeed=el.offsetWidth/frames;}mx[mal]=x;my[mal]=y;if(NS6||IE5||frames==0){el.style.left=x;el.style.top=y;}if(!IE5)clipMenu(mal,el);el.style.visibil ity="visible";ma[mal]=id;if(NS6){var p=event.target;if(p.nodeName!="A"&&p.parentNode.nodeName=="A")p=p.parentNode;mc[mal]=p.style;el.onmouseout=tidyMenu;}else{mc[mal]=event.srcElement.style;if(mal>0){mc[mal].backgroundColor=bc;mc[mal].color=fc;}}mal++;}}function overMenu(x,y){for(i=0;i<mal;i++){var el=document.getElementById(ma[i]);if(el.offsetLeft+el.offsetWidth>x&&el.offsetLeft<=x&&el.offsetTop+el.offsetHeight>y&&el.offsetTop<=y){return ma[i];}}return "";}function tidyMenu(e){if(NS4)return;if(NS6){t=overMenu(e.pageX,e.pageY);if(t!=""&&(e.target.firstChild==e.relatedTarget||e.target==e.relatedTarget.firstChild))return;}else t=overMenu(event.clientX+document.body.scrollLeft-document.body.clientLeft,event.clientY+document.body.scrollTop-document.body.clientTop);om=0;for(i=0;i<mal;i++){var mail=ma[i].length;if(mail>t.length||t.substring(0,mail)!=ma[i]){var el=document.getElementById(ma[i]);el.style.visibility="hidden";mc[i].backgroundColor="";mc[i].color="";}else{ma[om]=ma[i];mx[om]=mx[i];my[om]=my[i];om++;}}mal=om;if(mal==0&&psrc)psrc.src=pname;}function animate(){for(i=0;i<mal;i++){var el=document.getElementById(ma[i]);if(el.style.visibility=="visible"){if(el.offsetLeft<mx[i])el.style.left=Math.min(el.offsetLeft+nspeed,mx[i])+"px";if(el.offsetLeft>mx[i])el.style.left=Math.max(el.offsetLeft-nspeed,mx[i])+"px";if(el.offsetTop<my[i])el.style.top=Math.min(el.offsetTop+nspeed,my[i])+"px";clipMenu(i,el);}}if(mal!=0||frames!=0)setTimeout("animate()",50);}function clipMenu(i,el){if(el.offsetLeft>mx[i])el.style.clip="rect("+(my[i]-el.offsetTop)+"px "+(el.offsetWidth+(mx[i]-el.offsetLeft))+"px "+el.offsetHeight+"px "+0+"px)";else el.style.clip="rect("+(my[i]-el.offsetTop)+"px "+el.offsetWidth+"px "+el.offsetHeight+"px "+(mx[i]-el.offsetLeft)+"px)";}

-----------------