/    Sign up×
Community /Pin to ProfileBookmark

javascript menu code

Copy linkTweet thisAlerts:
Sep 27.2006

Hi

I am having trouble undertanding this code by javascript as it seems to read in the list elements given by the id tag into an array.
Then it displays them with classname?

The whole code works as a drop down menu and here is the javascript bit.

sfHover = function() {
var sfEls = document.getElementById(“nav”).getElementsByTagName(“LI”);
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=” sfhover”; //dont get this bit
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhoverb”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(“onload”, sfHover);

It seems to have an automatic event handler onload, display the 2nd level lists offscreen and back on screen when hover over 1st level using left:auto.

q) I can’t undertsand the mouse over function as how does it know to display the 2nd level lists?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@felgallSep 27.2006 — All that code does is to provide Internet Explorer with the same hover functionality as the standards say it is supposed to provide for all objects in the web page but which Internet Explorer only provides for <a> tags. It does it by adding a class to whatever object in the menu currently has the mouse hovering over it and removes the class from all the other entries.

The stylesheet code provides the instructions for what to do when the mouse is hovering over a particular element in the menu (or which has the appropriate class in IE).

All of the actual menu functionality is actually provided by the stylesheet and the menu is fully functional without any Javascript in all browsers except for IE6 (and below). You are looking in the wrong place for the code that processes the different menu levels, each of those will have separate entries in the stylesheet that tells it what to do when.
Copy linkTweet thisAlerts:
@jagguyauthorSep 27.2006 — Hi,

I understand the html and css which i didn't paste in but it was the above questions with javascript logic I didn't get. The menus dissapear as they are positioned out of the screen and reset when hovered over. The javascript adding class to thing, I don't get is this adding list items in a variable or what/why do you need classname? I know c++ but I can't see the association between the list of items to be displayed in a certain way and a classname variable.

PS Isn't there an easier way to do this as I have found the code to be a little all over the place. Maybe having each sub-list as an id so we only reference 1 list at a time and there must be a way to do without javascript.
Copy linkTweet thisAlerts:
@jagguyauthorSep 28.2006 — Hi,

I am still unsure about the logic here.

This is the css code and hover call.

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */

left: auto;

background=yellow;

}


This is the javascript bit

sfEls[i].onmouseover=function() {

this.className+=" sfhover"; //dont get this bit as how does this related to the 2nd level list.



There is a missing link here I can't see the connection between the css and javascript in those specific bits I outlined. If anyone can help that would be great.
Copy linkTweet thisAlerts:
@felgallSep 28.2006 — The class name is needed because IE6 hasn't implemented the CSS to recognise when the mouse hovers over something. The Javascript code applies a class to the current menu item (and only the current menu item) that can be tested in the CSS as being equivalent to the hover option that IE doesn't support.

#nav li:hover ul - sets the style for when the mouse hovers over the element in all browsers that support hover.

#nav li.sfhover ul - sets the style for when the element has a class of 'sfhover' which the Javascript sets in IE6 when the mouse moves over that element and removes again when the mouse moves elsewhere.

The Javascript just sets the class on whatever menu entry at whatever level in the menu (2nd, third, 4th, whatever). The CSS determines the action depending on what level it is at:

#nav li.sfhover ul - 1st level menu entry hovered over

#nav li li.sfhover ul - 2nd level

#nav li li li.sfhover ul - third level

#nav li li li li.sfhover ul - fourth level

the actual position values set by the CSS will be different for each of those depending on where the next level menu is supposed to appear.

All the Javascript does is to make sure that in IE (and only IE understands attachEvent) that the 'sfhover' is attached to the element the mouse is over and that nothing else in the menu has that class attached. Other browsers don't need the javascript because they understand li:hover while IE only understands a:hover.
×

Success!

Help @jagguy spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...