By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,658 Members | 1,924 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,658 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.appName;
var bVer = parseInt(navigator.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.appName == "Netscape" && !document.getElementById){
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
layerVis="show";
layerHid="hide";
}
else if (!document.all && document.getElementById) {
layerStyleRef="layer.style.";
layerRef="document.getElementById";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
else {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
}
// SHOW MENU
function shLayer(layerName){
img = getImage("imgTabs");
x = getImagePageLeft(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(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {

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

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left="'+eval(layerName+'L')+
'"');
}
if (NS6) {

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerVis+'"');
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.to p="'+menuTop+'"');

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

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

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerHid+'"');
}
}
}// TIMER FOR BUTTON MOUSE OUT
function btnTimer() {
timeOn = setTimeout("btnOut()",1000)
}// BUTTON MOUSE OUT
function btnOut(layerName) {
if (menuActive == 0) {
hideLayer(onLayer)
}
}// MENU MOUSE OVER
function menuOver(itemName) {
clearTimeout(timeOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemName) {
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 400)

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

eval('document.getElementById("'+layer+'").style.b ackgroundColor="'+color+'"
');
}
else if (NS4){

eval('window.document.layers["'+layer+'"].document.bgColor="'+color+'"');
eval('window.document.layers["'+layer+'"].saveColor="'+color+'"');
}
else if (IE4){
eval('document.all.'+layer+'.style.backgroundColor ="'+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.length; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}

function getImagePageLeft(img) {
var x, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageX + img.x - 1;
else
return img.x - 1;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetParent != null) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
return x;
}
return -1;
}

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

Tips?

LRH
Jul 23 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
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.net/pubs/munging-harmful/>
I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus [...]
<http://devedge.netscape.com/viewsource/2003/devedge-redesign/#Key-Demo-able-Features>
I have code from smartwebby.com (DHTML) but I'm not sure if it's the best,
[...]


It's junk.
PointedEars
--
Shall we import lard or steel? Let me tell you, preparedness makes us
powerful. Butter merely makes us fat.
Jul 23 '05 #2

P: n/a
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" <no***@noone.com> wrote in message
news:YWKUc.10016$yh.9696@fed1read05...
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.appName;
var bVer = parseInt(navigator.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.appName == "Netscape" && !document.getElementById){
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
layerVis="show";
layerHid="hide";
}
else if (!document.all && document.getElementById) {
layerStyleRef="layer.style.";
layerRef="document.getElementById";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
else {
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
layerVis="visible";
layerHid="hidden";
}
}
// SHOW MENU
function shLayer(layerName){
img = getImage("imgTabs");
x = getImagePageLeft(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(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {

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

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left="'+eval(layerName+'L')+ '"');
}
if (NS6) {

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerVis+'"'); eval(layerRef+'("'+layerName+'")'+styleSwitch+'.to p="'+menuTop+'"');

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

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

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.vi sibility="'+layerHid+'"'); }
}
}// TIMER FOR BUTTON MOUSE OUT
function btnTimer() {
timeOn = setTimeout("btnOut()",1000)
}// BUTTON MOUSE OUT
function btnOut(layerName) {
if (menuActive == 0) {
hideLayer(onLayer)
}
}// MENU MOUSE OVER
function menuOver(itemName) {
clearTimeout(timeOn)
menuActive = 1
}// MENU MOUSE OUT
function menuOut(itemName) {
menuActive = 0
timeOn = setTimeout("hideLayer(onLayer)", 400)

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

eval('document.getElementById("'+layer+'").style.b ackgroundColor="'+color+'" ');
}
else if (NS4){

eval('window.document.layers["'+layer+'"].document.bgColor="'+color+'"');
eval('window.document.layers["'+layer+'"].saveColor="'+color+'"');
}
else if (IE4){
eval('document.all.'+layer+'.style.backgroundColor ="'+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.length; i++)
if (doc.images[i].name == name)
return doc.images[i];
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers[i].document)) != null) {
img.container = doc.layers[i];
return img;
}
return null;
}

function getImagePageLeft(img) {
var x, obj;
if (NS4 || NS6) {
if (img.container != null)
return img.container.pageX + img.x - 1;
else
return img.x - 1;
}
if (IE4) {
x = 0;
obj = img;
while (obj.offsetParent != null) {
x += obj.offsetLeft;
obj = obj.offsetParent;
}
x += obj.offsetLeft;
return x;
}
return -1;
}

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

Tips?

LRH

Jul 23 '05 #3

P: n/a
In article <YWKUc.10016$yh.9696@fed1read05>, no***@noone.com enlightened us
with...
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 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

Jul 23 '05 #4

P: n/a

"Thomas 'PointedEars' Lahn" <Po*********@web.de> ha
service provider. You have been warned.

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

(...)
I have code from smartwebby.com (DHTML) but I'm not sure if it's the best, [...]


It's junk.


Ah! Fantastic!
Jul 23 '05 #5

P: n/a
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" <ti******@NOSPAM.comcast.net> wrote in message
news:MP***********************@nntp.lucent.com...
In article <YWKUc.10016$yh.9696@fed1read05>, no***@noone.com enlightened us with...
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 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

Jul 23 '05 #6

P: n/a
Larry R Harrison Jr wrote:
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"


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.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #7

P: n/a
Larry R Harrison Jr wrote:
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.appName;
var bVer = parseInt(navigator.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);
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.
window.onerror = null;
var menuActive = 0
var menuOn = 0
var onLayer
var timeOn = null // LAYER SWITCHING CODE
if (NS4 || IE4 || NS6) {
if (navigator.appName == "Netscape" && !document.getElementById){
[snip]
else if (!document.all && document.getElementById) {
[snip]
}
else {
[snip]
}
}
All of the above can be very much simplified by getting rid of browser
detection as shown in the FAQ.
// SHOW MENU
function shLayer(layerName){
img = getImage("imgTabs");
x = getImagePageLeft(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(timeOn)
hideLayer(onLayer)
}
if (NS4 || IE4) {
[snip]
if (NS6) {
[snip]
}
onLayer = layerName
}
Same here - its much simpler without browser detection again.
}// HIDE MENU
function hideLayer(layerName){
[snip]
}
And again.
[snip]
}// SET BACKGROUND COLOR
function setBgColor(layer, color) {
if (NS6){
[snip]
}


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.
Jul 23 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.