How to Make "Mouse-Over" Drop-Down Menus

[Larry R Harrison Jr]

I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus--the type that when you "hover" over a subject links
relevant to that subject "emerge" which you can then "hover" over and click.
(see the links left on http://www.dpreview.com to see what I mean)

I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
and I'm not sure how to integrate any menus of my own into it. The code
follows:

******START OF CODE*********** *************** **
<script language = "Javascript ">
<!--
/**
* DHTML dropdown menu script. Courtesy of SmartWebby.com
(http://www.smartwebby.com/dhtml/)
*/

var bName = navigator.appNa me;
var bVer = parseInt(naviga tor.appVersion) ;
var NS6 = (bName == "Netscape" && bVer >= 5);
var NS4 = (bName == "Netscape" && bVer >= 4 && bVer < 5);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
var NS3 = (bName == "Netscape" && bVer < 4);
var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
window.onerror = null;
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null // LAYER SWITCHING CODE
if (NS4 || IE4 || NS6) {
if (navigator.appN ame == "Netscape" && !document.getEl ementById){
layerStyleRef=" layer.";
layerRef="docum ent.layers";
styleSwitch="";
layerVis="show" ;
layerHid="hide" ;
}
else if (!document.all && document.getEle mentById) {
layerStyleRef=" layer.style.";
layerRef="docum ent.getElementB yId";
styleSwitch=".s tyle";
layerVis="visib le";
layerHid="hidde n";
}
else {
layerStyleRef=" layer.style.";
layerRef="docum ent.all";
styleSwitch=".s tyle";
layerVis="visib le";
layerHid="hidde n";
}
}
// SHOW MENU
function shLayer(layerNa me){
img = getImage("imgTa bs");
x = getImagePageLef t(img);
y = getImagePageTop (img);
menuTop = y + 20 ; // LAYER TOP POSITION
SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION
if (NS4 || IE4 || NS6) {
if (timeOn != null) {
clearTimeout(ti meOn)
hideLayer(onLay er)
}
if (NS4 || IE4) {

eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .visibility="'+ layerVis+'"');
eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .top="'+menuTop +'"');

eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .left="'+eval(l ayerName+'L')+
'"');
}
if (NS6) {

eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.visibility=" '+layerVis+'"') ;
eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.top="'+menuT op+'"');

eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.left="'+eval (layerName+'L') +
'"');
}
onLayer = layerName
}
}// HIDE MENU
function hideLayer(layer Name){
if (menuActive == 0) {
if (NS4 || IE4) {

eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .visibility="'+ layerHid+'"');
}
if (NS6) {

eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.visibility=" '+layerHid+'"') ;
}
}
}// TIMER FOR BUTTON MOUSE OUT
function btnTimer() {
timeOn = setTimeout("btn Out()",1000)
}// BUTTON MOUSE OUT
function btnOut(layerNam e) {
if (menuActive == 0) {
hideLayer(onLay er)
}
}// MENU MOUSE OVER
function menuOver(itemNa me) {
clearTimeout(ti meOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemNam e) {
menuActive = 0
timeOn = setTimeout("hid eLayer(onLayer) ", 400)

}// SET BACKGROUND COLOR
function setBgColor(laye r, color) {
if (NS6){

eval('document. getElementById( "'+layer+'").st yle.backgroundC olor="'+color+' "
');
}
else if (NS4){

eval('window.do cument.layers["'+layer+'"].document.bgCol or="'+color+'"' );
eval('window.do cument.layers["'+layer+'"].saveColor="'+c olor+'"');
}
else if (IE4){
eval('document. all.'+layer+'.s tyle.background Color="'+color+ '"');
}
}

function getImage(name) {
if (NS4 || NS6) {
return findImage(name, document);
}
if (IE4 || NS6)
return eval('document. all.' + name);
return null;
}

function findImage(name, doc) {
var i, img;
for (i = 0; i < doc.images.leng th; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.leng th; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}

function getImagePageLef t(img) {
var x, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.p ageX + img.x - 1;
else
return img.x - 1;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetPare nt != null) {
x += obj.offsetLeft;
obj = obj.offsetParen t;
}
x += obj.offsetLeft;
return x;
}
return -1;
}

function getImagePageTop (img) {
var y, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.p ageY + img.y;
else
return img.y;
}
if (IE4) {
y = 0;
obj = img;
while (obj.offsetPare nt != null) {
y += obj.offsetTop;
obj = obj.offsetParen t;
}
y += obj.offsetTop;
return y;
}
return -1;
}
// -->
</script>
******END OF CODE*********** *************** *****

Tips?

LRH

[Thomas 'PointedEars' Lahn]

Re: How to Make &quot;Mouse-Over&quot; Drop-Down Menus

Larry R Harrison Jr wrote:

Your From address does not specify a mailbox which is a violation of
Internet/Usenet standards and disregarding the Netiquette as well
as most certainly a violation of the Acceptable Use Policy of your
service provider.  You have been warned.

<http://www.interhack.n et/pubs/munging-harmful/>
[color=blue]
> I am looking for javascript and a basic tutorial on how to make mouse-over
> drop-down menus [...][/color]

<http://devedge.netscap e.com/viewsource/2003/devedge-redesign/#Key-Demo-able-Features>
[color=blue]
> I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
> [...][/color]

It's junk.


PointedEars
--
Shall we import lard or steel? Let me tell you, preparedness makes us
powerful. Butter merely makes us fat.

[Larry R Harrison Jr]

Re: How to Make &quot;Mouse-Over&quot; Drop-Down Menus

Okay, one guy seems offended that I didn't give him a suitable email box so
he could spam me and aggravate me inappropriately . Anyone out there with
actual help on their mind?

"Larry R Harrison Jr" <noone@noone.co m> wrote in message
news:YWKUc.1001 6$yh.9696@fed1r ead05...[color=blue]
> I am looking for javascript and a basic tutorial on how to make mouse-over
> drop-down menus--the type that when you "hover" over a subject links
> relevant to that subject "emerge" which you can then "hover" over and[/color]
click.[color=blue]
> (see the links left on http://www.dpreview.com to see what I mean)
>
> I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
> and I'm not sure how to integrate any menus of my own into it. The code
> follows:
>
> ******START OF CODE*********** *************** **
> <script language = "Javascript ">
> <!--
> /**
> * DHTML dropdown menu script. Courtesy of SmartWebby.com
> (http://www.smartwebby.com/dhtml/)
> */
>
> var bName = navigator.appNa me;
> var bVer = parseInt(naviga tor.appVersion) ;
> var NS6 = (bName == "Netscape" && bVer >= 5);
> var NS4 = (bName == "Netscape" && bVer >= 4 && bVer < 5);
> var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
> var NS3 = (bName == "Netscape" && bVer < 4);
> var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
> window.onerror = null;
> var menuActive = 0
> var menuOn = 0
> var onLayer
> var timeOn = null // LAYER SWITCHING CODE
> if (NS4 || IE4 || NS6) {
> if (navigator.appN ame == "Netscape" && !document.getEl ementById){
> layerStyleRef=" layer.";
> layerRef="docum ent.layers";
> styleSwitch="";
> layerVis="show" ;
> layerHid="hide" ;
> }
> else if (!document.all && document.getEle mentById) {
> layerStyleRef=" layer.style.";
> layerRef="docum ent.getElementB yId";
> styleSwitch=".s tyle";
> layerVis="visib le";
> layerHid="hidde n";
> }
> else {
> layerStyleRef=" layer.style.";
> layerRef="docum ent.all";
> styleSwitch=".s tyle";
> layerVis="visib le";
> layerHid="hidde n";
> }
> }
> // SHOW MENU
> function shLayer(layerNa me){
> img = getImage("imgTa bs");
> x = getImagePageLef t(img);
> y = getImagePageTop (img);
> menuTop = y + 20 ; // LAYER TOP POSITION
> SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
> ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
> RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION
> if (NS4 || IE4 || NS6) {
> if (timeOn != null) {
> clearTimeout(ti meOn)
> hideLayer(onLay er)
> }
> if (NS4 || IE4) {
>
>[/color]
eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .visibility="'+ layerVis+'"');[color=blue]
> eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .top="'+menuTop +'"');
>
>[/color]
eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .left="'+eval(l ayerName+'L')+[color=blue]
> '"');
> }
> if (NS6) {
>
>[/color]
eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.visibility=" '+layerVis+'"') ;[color=blue]
> eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.top="'+menuT op+'"');
>
>[/color]
eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.left="'+eval (layerName+'L') +[color=blue]
> '"');
> }
> onLayer = layerName
> }
> }// HIDE MENU
> function hideLayer(layer Name){
> if (menuActive == 0) {
> if (NS4 || IE4) {
>
>[/color]
eval(layerRef+'["'+layerNam e+'"]'+styleSwitch+' .visibility="'+ layerHid+'"');[color=blue]
> }
> if (NS6) {
>
>[/color]
eval(layerRef+' ("'+layerName+' ")'+styleSwitch +'.visibility=" '+layerHid+'"') ;[color=blue]
> }
> }
> }// TIMER FOR BUTTON MOUSE OUT
> function btnTimer() {
> timeOn = setTimeout("btn Out()",1000)
> }// BUTTON MOUSE OUT
> function btnOut(layerNam e) {
> if (menuActive == 0) {
> hideLayer(onLay er)
> }
> }// MENU MOUSE OVER
> function menuOver(itemNa me) {
> clearTimeout(ti meOn)
> menuActive = 1
> }// MENU MOUSE OUT
> function menuOut(itemNam e) {
> menuActive = 0
> timeOn = setTimeout("hid eLayer(onLayer) ", 400)
>
> }// SET BACKGROUND COLOR
> function setBgColor(laye r, color) {
> if (NS6){
>
>[/color]
eval('document. getElementById( "'+layer+'").st yle.backgroundC olor="'+color+' "[color=blue]
> ');
> }
> else if (NS4){
>
> eval('window.do cument.layers["'+layer+'"].document.bgCol or="'+color+'"' );
> eval('window.do cument.layers["'+layer+'"].saveColor="'+c olor+'"');
> }
> else if (IE4){
> eval('document. all.'+layer+'.s tyle.background Color="'+color+ '"');
> }
> }
>
> function getImage(name) {
> if (NS4 || NS6) {
> return findImage(name, document);
> }
> if (IE4 || NS6)
> return eval('document. all.' + name);
> return null;
> }
>
> function findImage(name, doc) {
> var i, img;
> for (i = 0; i < doc.images.leng th; i++)
> if (doc.images[i].name == name)
> return doc.images[i];
> for (i = 0; i < doc.layers.leng th; i++)
> if ((img = findImage(name, doc.layers[i].document)) != null) {
> img.container = doc.layers[i];
> return img;
> }
> return null;
> }
>
> function getImagePageLef t(img) {
> var x, obj;
> if (NS4 || NS6) {
> if (img.container != null)
> return img.container.p ageX + img.x - 1;
> else
> return img.x - 1;
> }
> if (IE4) {
> x = 0;
> obj = img;
> while (obj.offsetPare nt != null) {
> x += obj.offsetLeft;
> obj = obj.offsetParen t;
> }
> x += obj.offsetLeft;
> return x;
> }
> return -1;
> }
>
> function getImagePageTop (img) {
> var y, obj;
> if (NS4 || NS6) {
> if (img.container != null)
> return img.container.p ageY + img.y;
> else
> return img.y;
> }
> if (IE4) {
> y = 0;
> obj = img;
> while (obj.offsetPare nt != null) {
> y += obj.offsetTop;
> obj = obj.offsetParen t;
> }
> y += obj.offsetTop;
> return y;
> }
> return -1;
> }
> // -->
> </script>
> ******END OF CODE*********** *************** *****
>
> Tips?
>
> LRH
>
>[/color]

[kaeli]

Re: How to Make &quot;Mouse-Over&quot; Drop-Down Menus

In article <YWKUc.10016$yh .9696@fed1read0 5>, noone@noone.com enlightened us
with...[color=blue]
> I am looking for javascript and a basic tutorial on how to make mouse-over
> drop-down menus--the type that when you "hover" over a subject links
> relevant to that subject "emerge" which you can then "hover" over and click.
> (see the links left on http://www.dpreview.com to see what I mean)
>[/color]

I like the HVMenu over at Dynamic Drive myself. Why reinvent the wheel? :)

http://www.dynamicdrive.com

If it's a coding exercise for you, check out the source code. It's
practically illegible with the shortcuts, lack of comments, and variable
names, but it might give you a hint or three.
I tried this a while back, and, after pounding my head against the wall for
awhile, decided I'd rather use someone else's nice, tested, and FREE code.
*grins*

HTH
--
--
~kaeli~
Condoms should be used on every conceivable occasion.

http://www.ipwebdesign.net/wildAtHeart

http://www.ipwebdesign.net/kaelisSpace

[Alberto]

Re: How to Make &quot;Mouse-Over&quot; Drop-Down Menus


"Thomas 'PointedEars' Lahn" <PointedEars@we b.de> ha[color=blue]
> service provider. You have been warned.[/color]


wooooow Larry, are you trembling yet now that pointed ears has warned you?
ahahahahahahaha

(...)[color=blue][color=green]
> > I have code from smartwebby.com (DHTML) but I'm not sure if it's the[/color][/color]
best,[color=blue][color=green]
> > [...][/color]
>
> It's junk.[/color]

Ah! Fantastic!

[Larry R Harrison Jr]

Re: How to Make &quot;Mouse-Over&quot; Drop-Down Menus

I grabbed some code and got it working fine, with one problem--I want to
move the javascript (JS) files to their own folder. So in the portions you
add to your HTML file where it says SRC= I tried the following syntaxes,
NONE of them work:

src="newfolder\ custom.js"
src="newfolder/custom.js"
src="\newfolder \custom.js"

Again it originally said

src="custom.js"

and if I left it that way and had the JS files in the same folder as the
HTML file, all was well. But again I want to be able to move the JS files to
their own folder to reduce clutter. I just can't seem to get the path right.
And searching in Google I can't seem to find the answer.

Tips?

LRH

NONE of them work. It works fine if I have the files in the
src="\js_files\ custom.js"



"kaeli" <tiny_one@NOSPA M.comcast.net> wrote in message
news:MPG.1b8d4f 4099a085098a05c @nntp.lucent.co m...[color=blue]
> In article <YWKUc.10016$yh .9696@fed1read0 5>, noone@noone.com enlightened[/color]
us[color=blue]
> with...[color=green]
> > I am looking for javascript and a basic tutorial on how to make[/color][/color]
mouse-over[color=blue][color=green]
> > drop-down menus--the type that when you "hover" over a subject links
> > relevant to that subject "emerge" which you can then "hover" over and[/color][/color]
click.[color=blue][color=green]
> > (see the links left on http://www.dpreview.com to see what I mean)
> >[/color]
>
> I like the HVMenu over at Dynamic Drive myself. Why reinvent the wheel?[/color]
:)[color=blue]
> http://www.dynamicdrive.com
>
> If it's a coding exercise for you, check out the source code. It's
> practically illegible with the shortcuts, lack of comments, and variable
> names, but it might give you a hint or three.
> I tried this a while back, and, after pounding my head against the wall[/color]
for[color=blue]
> awhile, decided I'd rather use someone else's nice, tested, and FREE code.
> *grins*
>
> HTH
> --
> --
> ~kaeli~
> Condoms should be used on every conceivable occasion.
> http://www.ipwebdesign.net/wildAtHeart
> http://www.ipwebdesign.net/kaelisSpace
>[/color]

[Randy Webb]

Re: How to Make &quot;Mouse-Over&quot; Drop-Down Menus

Larry R Harrison Jr wrote:
[color=blue]
> I grabbed some code and got it working fine, with one problem--I want to
> move the javascript (JS) files to their own folder. So in the portions you
> add to your HTML file where it says SRC= I tried the following syntaxes,
> NONE of them work:
>
> src="newfolder\ custom.js"
> src="newfolder/custom.js"
> src="\newfolder \custom.js"[/color]

The src path depends on the folder structure.

Lets say you have a folder called WWW and inside that folder you have
two folders, one named HTMLFiles, the other named ScriptFiles.

In a file in HTMLFiles folder and a .js file in the ScriptFiles folder,
the src would be:

...\ScriptFiles \filename.js

...\ tells it to go up one folder in the heirarchy.

Another alternative is to use an absolute URL to the file:

src="http://www.domainname. com/folderName/filename.js"


--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq

[Mark Preston]

Re: How to Make &quot;Mouse-Over&quot; Drop-Down Menus

Larry R Harrison Jr wrote:[color=blue]
> I am looking for javascript and a basic tutorial on how to make mouse-over
> drop-down menus [snip]
>
> ******START OF CODE*********** *************** **
> [snip]
>
> var bName = navigator.appNa me;
> var bVer = parseInt(naviga tor.appVersion) ;
> var NS6 = (bName == "Netscape" && bVer >= 5);
> var NS4 = (bName == "Netscape" && bVer >= 4 && bVer < 5);
> var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
> var NS3 = (bName == "Netscape" && bVer < 4);
> var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);[/color]

This chunk is only useful for "browser detection" and browser deection
is a bad, bad idea. For example, in the above you don't allow for the
incredibly common case of people using Opera and setting it to claim
that it is Microsoft IE. Refer to the group FAQ for much better (and
much simpler) methods.
[color=blue]
> window.onerror = null;
> var menuActive = 0
> var menuOn = 0
> var onLayer
> var timeOn = null // LAYER SWITCHING CODE
> if (NS4 || IE4 || NS6) {
> if (navigator.appN ame == "Netscape" && !document.getEl ementById){
> [snip]
> else if (!document.all && document.getEle mentById) {
> [snip]
> }
> else {
> [snip]
> }
> }[/color]

All of the above can be very much simplified by getting rid of browser
detection as shown in the FAQ.
[color=blue]
> // SHOW MENU
> function shLayer(layerNa me){
> img = getImage("imgTa bs");
> x = getImagePageLef t(img);
> y = getImagePageTop (img);
> menuTop = y + 20 ; // LAYER TOP POSITION
> SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
> ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
> RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION
> if (NS4 || IE4 || NS6) {
> if (timeOn != null) {
> clearTimeout(ti meOn)
> hideLayer(onLay er)
> }
> if (NS4 || IE4) {
> [snip]
> if (NS6) {
> [snip]
> }
> onLayer = layerName
> }[/color]

Same here - its much simpler without browser detection again.
[color=blue]
> }// HIDE MENU
> function hideLayer(layer Name){
> [snip]
> }[/color]

And again.
[color=blue]
> [snip]
> }// SET BACKGROUND COLOR
> function setBgColor(laye r, color) {
> if (NS6){
> [snip]
> }[/color]

And, dare I say it, again this would be a lot simpler without browser
detection as well. I would advise you to grab a copy of the FAQ, look at
*object* detection and *function* detection instead of *browser*
detection and adapt the code. You'll probably find it turns out a lot
smaller and faster.