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

  • Thread starter Larry R Harrison Jr
  • Start date
L

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.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+'.visibility="'+layerVis+'"');
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.top="'+menuTop+'"');

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.left="'+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+'.visibility="'+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.backgroundColor="'+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.name == name)
return doc.images;
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers.document)) != null) {
img.container = doc.layers;
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
 
T

Thomas 'PointedEars' Lahn

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.

I am looking for javascript and a basic tutorial on how to make mouse-over
drop-down menus [...]
Click to expand...

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

It's junk.


PointedEars
 
L

Larry R Harrison Jr

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 said:
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+'"');
Click to expand...
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.left="'+eval(layerName+'L')+
'"');
}
if (NS6) {

eval(layerRef+'("'+layerName+'")'+styleSwitch+'.visibility="'+layerVis+'"');
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.top="'+menuTop+'"');
Click to expand...
eval(layerRef+'("'+layerName+'")'+styleSwitch+'.left="'+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+'.visibility="'+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.backgroundColor="'+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.name == name)
return doc.images;
for (i = 0; i < doc.layers.length; i++)
if ((img = findImage(name, doc.layers.document)) != null) {
img.container = doc.layers;
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
Click to expand...
 
K

kaeli

[email protected] enlightened us said:
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)
Click to expand...

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
--
 
L

Larry R Harrison Jr

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"



 
R

Randy Webb

Larry said:
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"
Click to expand...

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"
 
M

Mark Preston

Larry said:
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);
Click to expand...

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]
}
}
Click to expand...

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
}
Click to expand...

Same here - its much simpler without browser detection again.
}// HIDE MENU
function hideLayer(layerName){
[snip]
}
Click to expand...

And again.
[snip]
}// SET BACKGROUND COLOR
function setBgColor(layer, color) {
if (NS6){
[snip]
}
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help With a Script 5
Follow-up: "Mouse-Over" Drop-Down Menus 4
Collect Excel Data from Website 5
Drop down menues 0
Cascading menus in Javascript 6
Drop Down Menu 2
Ending drag&drop operation on mouse out of browser? 3
mouse movement required to load content 0

Members online

Total: 33 (members: 2, guests: 31)
Robots: 428

Forum statistics

Threads
473,768
Messages
2,569,574
Members
45,050
Latest member
AngelS122

Latest Threads

Top