Javascript menu over different frames 1

[TheDemon]

Not being a proficient javascript programmer, i am looking for a (freeware) drop-down menu system that sits in a small frame at the top of the page and, when rolled over, will reveal the menu details. however, it needs to drop down OVER the frame underneath.<br><br>i particularly like the menu system on <A HREF="

http://www.gameplay.com"

TARGET="_new">

http://www.gameplay.com</A>

though the page is not made up of frames, despite its appearance.<br><br>any help would be greatly appreciated, especially as this is for a non-commercial site.<br><br>thanks for your time

 

[atomas]

Hi, not being a pro at programming just a web artist, <br>I found this drop down menu script and use it in frames <br>(it open/close over the frame).<br>Maybe it is what you looking for...<br>In any case, good luck!<br><br><br>Atomas ;-)<br>web intergrator<br><br><br>&lt;SCRIPT LANGUAGE=&quot;JavaScript1.2&quot;&gt;<br>&lt;!--<br><br>var NS4 = (document.layers) ? true : false;<br>var IE4 = (document.all) ? true : false;<br>var maxZ = 1;<br><br>function popout(id, posY, width) {<br>&nbsp;&nbsp;this.id = id; // the element's name (and the variable's name)<br>&nbsp;&nbsp;this.posY = posY; // the element's top property<br>&nbsp;&nbsp;this.width = width; // the element's width<br>&nbsp;&nbsp;this.show = false; // do not show the element<br>&nbsp;&nbsp;this.makeImage = makeImage; // constructs the image's tab<br>&nbsp;&nbsp;this.makeElement = makeElement; // constructs the content box<br>&nbsp;&nbsp;this.showElement = showElement; // sets the element's visibility<br>}<br><br>function makeImage(imgURL, imgHeight, imgWidth, imgAlt) {<br>&nbsp;&nbsp;document.write(<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;STYLE TYPE=&quot;text/css&quot;&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;'#', this.id, 'img {',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'position: absolute;',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'left: 0; top: ', this.posY, ';',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'width: ', imgWidth, ';',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'z-index: 1',<br>&nbsp;&nbsp;&nbsp;&nbsp;'}',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;/STYLE&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;DIV ID=&quot;', this.id, 'img&quot;&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;javascript:', this.id, '.showElement()&quot;&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;IMG SRC=&quot;', imgURL, '&quot; ALT=&quot;', imgAlt, '&quot; BORDER=&quot;0&quot; ',<br>&nbsp;&nbsp;&nbsp;&nbsp;'HEIGHT=&quot;', imgHeight, '&quot; WIDTH=&quot;', imgWidth, '&quot;&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;/A&gt;&lt;/DIV&gt;'<br>&nbsp;&nbsp;<br>}<br><br>function makeElement(boxBg, boxColor, boxCode) {<br>&nbsp;&nbsp;var padding = (NS4) ? '' : 'padding: 3 0 3 3;';<br>&nbsp;&nbsp;document.write(<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;STYLE TYPE=&quot;text/css&quot;&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;'#', this.id, 'box {',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'position: absolute;',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'left: 0; top: ', this.posY, ';',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'width: ', this.width, ';',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'layer-background-color: ', boxBg, ';',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'background-color: ', boxBg, ';',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'visibility: hidden;',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-width: 0;',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-style: solid;',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'border-color: ', boxColor, ';',<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'z-index: 1',<br>&nbsp;&nbsp;&nbsp;&nbsp;'}',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;/STYLE&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;DIV ID=&quot;', this.id, 'box&quot;&gt;',<br>&nbsp;&nbsp;&nbsp;&nbsp;boxCode,<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;/DIV&gt;'<br>&nbsp;&nbsp;<br>}<br><br>function showElement() {<br>&nbsp;&nbsp;this.show = !this.show;<br>&nbsp;&nbsp;var pos = (this.show) ? this.width : 0;<br>&nbsp;&nbsp;if (NS4) {<br>&nbsp;&nbsp;&nbsp;&nbsp;var str = (this.show) ? 'show' : 'hide';<br>&nbsp;&nbsp;&nbsp;&nbsp;eval('document.' + this.id + 'img.left = ' + pos);<br>&nbsp;&nbsp;&nbsp;&nbsp;eval('document.' + this.id + 'img.zIndex = ' + (++maxZ));<br>&nbsp;&nbsp;&nbsp;&nbsp;eval('document.' + this.id + 'box.zIndex = ' + maxZ);<br>&nbsp;&nbsp;&nbsp;&nbsp;eval('document.' + this.id + 'box.visibility = &quot;' + str + '&quot;');<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;var str = (this.show) ? 'visible' : 'hidden';<br>&nbsp;&nbsp;&nbsp;&nbsp;eval(this.id + 'img.style.left = ' + pos);<br>&nbsp;&nbsp;&nbsp;&nbsp;eval(this.id + 'img.style.zIndex = ' + (++maxZ));<br>&nbsp;&nbsp;&nbsp;&nbsp;eval(this.id + 'box.style.zIndex = ' + maxZ);<br>&nbsp;&nbsp;&nbsp;&nbsp;eval(this.id + 'box.style.visibility = &quot;' + str + '&quot;');<br>&nbsp;&nbsp;}<br>}<br><br>function styleEnabled() {<br>&nbsp;&nbsp;return ((NS4 && document.test) ¦¦ IE4);<br>}<br><br>function init() {<br>&nbsp;&nbsp;if (!styleEnabled()) return;<br>&nbsp;&nbsp;menu1 = new popout('menu1', 0, 70); // a global variable<br>&nbsp;&nbsp;menu1.makeImage('images/images/menu.gif', 50, 25,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Menu');<br>&nbsp;&nbsp;menu1.makeElement('003366', '003366',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;index.htm&quot; target=&quot;_top&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_home.gif&quot; WIDTH=63 HEIGHT=58 border=0 VSPACE=0 NAME=&quot;textField1&quot;&gt;&lt;/A&gt;&lt;BR&gt;' +<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;javascript:void(0)&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_go.gif&quot; WIDTH=63 HEIGHT=60 border=0 VSPACE=0 NAME=&quot;textField2&quot;&gt;&lt;/A&gt;&lt;BR&gt;' +<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;wholesale/e_frame_w.html&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_w.gif&quot; WIDTH=63 HEIGHT=71 border=0 VSPACE=0 NAME=&quot;textField3&quot;&gt;&lt;/A&gt;&lt;BR&gt;'&nbsp;&nbsp;<br> );<br> <br>&nbsp;&nbsp;menu2 = new popout('menu2', 195, 70); // a global variable<br>&nbsp;&nbsp;menu2.makeImage('images/images/textiles.gif', 90, 25,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Textiles');<br>&nbsp;&nbsp;menu2.makeElement('003366', '003366',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;retail/nylon/preload_nylon.htm&quot; target=&quot;_top&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_nylon.gif&quot; WIDTH=63 HEIGHT=60 border=0 VSPACE=0 NAME=&quot;textField1&quot;&gt;&lt;/A&gt;&lt;BR&gt;' +<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;retail/retail_frameset.htm&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_microtex.gif&quot; WIDTH=63 HEIGHT=64 border=0 VSPACE=0 NAME=&quot;textField2&quot;&gt;&lt;/A&gt;&lt;BR&gt;' +<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;retail/retail_frameset.htm&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_stretch.gif&quot; WIDTH=63 HEIGHT=59 border=0 VSPACE=0 NAME=&quot;textField3&quot;&gt;&lt;/A&gt;&lt;BR&gt;' +<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;retail/retail_frameset.htm&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_cotton.gif&quot; WIDTH=63 HEIGHT=57 border=0 VSPACE=0 NAME=&quot;textField4&quot;&gt;&lt;/A&gt;&lt;BR&gt;' <br>&nbsp;&nbsp;<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;menu3 = new popout('menu3', 440, 70); // a global variable<br>&nbsp;&nbsp;menu3.makeImage('images/images/infos.gif', 45, 25,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'Infos');<br>&nbsp;&nbsp;menu3.makeElement('003366', '003366',<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;A HREF=&quot;javascript:void(0)&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_help.gif&quot; WIDTH=63 HEIGHT=62 border=0 VSPACE=0 NAME=&quot;textField1&quot;&gt;&lt;/A&gt;&lt;BR&gt;' +<br>&nbsp;&nbsp;&nbsp;&nbsp;'&lt;a href=&quot;mailto:<A HREF="mailto:jude@cam.org">jude@cam.org</A>%20&quot;&gt;&lt;IMG SRC=&quot;images/buttons/but_email.gif&quot; WIDTH=63 HEIGHT=60 border=0 VSPACE=0 NAME=&quot;textField2&quot;&gt;&lt;/A&gt;&lt;BR&gt;'&nbsp;&nbsp;<br> );<br>}<br><br>init();<br><br>// --&gt;<br>&lt;/SCRIPT&gt;

 

[theEclipse]

if atomas' script dosn't work, goto <A HREF="

http://www.bratta.com"

TARGET="_new">

http://www.bratta.com</A>,

he has several scripts there, I think they will meet your needs. <p>theEclipse<br><a href=mailto:eclipse_web@hotmail.com>eclipse_web@hotmail.com</a><br><a href=robacarp.webjump.com>robacarp.webjump.com</a><br>**-Trying to build a documentation of a Javascript DOM, crossbrowser, of course. E-mail me if you know of any little known events and/or methods, etc.

 

[philcha]

2 sources which might be useful:<br>*&nbsp;&nbsp;<b><A HREF="

http://www.brainjar.com"

TARGET="_new">

http://www.brainjar.com</A></b>

has a drop-down menu at the top of its home page.&nbsp;&nbsp;Select the &quot;DHTML&quot; and &quot;Menus / Navigation&quot; options in this menu, and the drop-down menu system can be accessed from one of the items on the next page. I particularly like this one because it's packaged as a set of objects&nbsp;&nbsp;-&nbsp;&nbsp;you don't have to change the code, just call the methods which the objects provide.&nbsp;&nbsp;And the site provides a download file (zipped) containing the scripts, documentation pages and examples of pages which use the menu.<br>*&nbsp;&nbsp;<b><A HREF="

http://www.javascripts.com"

TARGET="_new">

http://www.javascripts.com</A></b>

has a recent item &quot;<b>yx_menu G2</b>&quot; which is (or was recently) one of its scripts of the month.&nbsp;&nbsp;If I remember correctly this needs a lot more tailoring but is more flexible, e.g. can be made to work with frames and you can place the menu along either side of the page as well as along the top / bottom.&nbsp;&nbsp;This developer has also provided a download file (zipped) containing the scripts, documentation pages and examples of pages which use the menu.<br><br>If you're not proficient in Javascript, I suggest you go for the first one (<b><A HREF="

http://www.brainjar.com"

TARGET="_new">

http://www.brainjar.com</A></b>)

as it's shrink-wrapped.<br>

 

[TheDemon]

It's been a long time but thank you for your replies. All useful, but I especially love brainjar (may be because I'm new to JS?) - it's such a clean site.<br><br>Cheers guys.