Issue with dropdown menu

JavaScript
1

Hi

Please see the dropdown menu at http://www.tenthtime.com

Hover over any item in the navbar at the top and you get a dropdown menu using Suckerfish. I’ve also got a piece of JavaScript (subnav.js) in there which applies the :hover state to the parent list item when hovering over the child menu.

This works well, with the exception that when hovering over any menu item, the first element in the unordered list (entertainment) also takes on the :hover state.

I’m a JS novice to say the least, any idea what’s wrong?

2

Any ideas guys? :slight_smile:

3

As an FYI, the technique I’m using is detailed here:

http://www.darrenkrape.com/fun/journal/drop-down-menus-persistent-top-level-menu-styling/#complete_code

4

Any thoughts, guys?

Last bump, I promise! :slight_smile:

5

The cause of the text below the heading taking on the hover state, is that the text below the menu heading is also contained inside of the same anchor as that for the heading.

I don’t see the content though within the page code, ir even when viewing the DOM, which is strange.

6

Hi, thanks for the response.

Not sure I completely understand what you’re saying (sorry! :blush:) - can you just clarify what you mean, please?

Thanks. :slight_smile:

7

Okay, to clarify: Where in the code files is stored the following text

fun, fun fun, everything you need to entertain yourself

8

Ahh, it’s not text!

Look for example at the following image:
http://www.tenthtime.com/images/categories/entertainment.png

9

Think we’re talking about two different things here. :slight_smile:

Sorry, my bad for the poor initial explanation. Let me start again:

Look at the main menu, just under the logo - the light brown buttons reading ‘Entertainment’, ‘Electronics’ etc. Hover over the ‘entertainment’ button - everything’s fine; the dropdown and hover effect works perfectly.

Now, move your cursor to any other button in the main nav. Everything works, however the ‘Entertainment’ button still takes on its hover state. See this image for example:

FYI - this works fine without subnav.js. This is just a piece of JS which makes a ‘li a’ retain its hover state when the cursor moves onto its associated dropdown menu list.

10

Ahh yes, now that is something completely different. Will investigate shortly.

11

Thanks very much, sir. :slight_smile:

12

Okay, I think I might know what’s going on, but first I would like to know what you’re wanting to achieve with the existing script.

Is it that you are wanting to have the menu title remain active while the person is hovering over the items in the menu list?

13

Currently the script is attaching the onmouseover event to all UL elements within #nav, this includes the menu titles, as well as the submenus

Limit what the event attaches on to by checking that the element is a submenu, and you should be right.


if (listItem[i].className === 'submenu') {
  listItem[i].onmouseover=function() {
    ...
  }
}
14

If you require a better hasClass method, there is a good set of hasClass, addClass, removeClass at http://snipplr.com/view/3561/addclass-removeclass-hasclass/

15

Just to let me explain as clearly as possible, look at the earlier screenshot (http://i50.tinypic.com/10gy7a1.jpg).

So, I hover over the ‘office’ button. It changes to its hover state, and the dropdown menu appears. Now, ordinarily, if I were to move onto the dropdown menu the ‘office’ button would lose its hover state.

I don’t want this to happen; so essentially, subnav.js kicks in and ensures that when I hover over the submenu, the class .active is applied to the ‘office’ button and the hover state remains.

Hope this makes sense.

16

It sure does, see post #13

17

Yeah, sorry - didn’t see your later posts until I’d sent mine.

Now, I know you’ve already spent some generous time looking into this for me, but I have to admit that my knowledge of JS is very, very limited.

Could you just explain where this extra code would fit into the existing? :blush:

Really appreciate your assistance, by the way…

18

The if statement should enclose the whole code block inside of the for statement.

Before:


for (...) {
    ...
}

After:


for (...) {
    if (listItem[i].className === 'submenu') {
        ...
    }
}
19

Do you mean like this?


  menuHover = function(nav) {
  
  var listItem = document.getElementById(nav).getElementsByTagName('ul');
    for(var i=0;i<listItem.length;i++) {
      listItem[i].onmouseover=function() {
        var changeStyle = this.parentNode.getElementsByTagName('a');
        changeStyle[0].className+=" active";
      }
	  
	  if (listItem[i].className === 'submenu') {
  listItem[i].onmouseover=function() {
    ...
  }
}

      listItem[i].onmouseout=function() {
        var changeStyle = this.parentNode.getElementsByTagName('a');
        changeStyle[0].className=this.className.replace(new RegExp("\\\\s?active\\\\b"), "");
      }
    }
  }

  function addEvent( obj, type, fn ) {
    if ( obj.attachEvent ) {
      obj['e'+type+fn] = fn;
      obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
      obj.attachEvent( 'on'+type, obj[type+fn] );
    } else
      obj.addEventListener( type, fn, false );
    }
  function removeEvent( obj, type, fn ) {
    if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
    } else
      obj.removeEventListener( type, fn, false );
    }

  addEvent(window, 'load', function () { menuHover('nav'); });
20

The … symbol should not be typed as is into the code, it is used to represent all of the code that was inside the for statement.