Drop down menu requires click to activate

JavaScript
1

Okay, I’ve been searching through here for a day, but haven’t quite found what I need. I’m rebuilding my client’s site (http://www.continentalscrew.com) to update the code and get it off of Yahoo’s CMS.

My rebuilt site (http://www.vmtweb.com/conscrew/) is nearly complete, except the navigation. I want to keep the function that each menu requires a click to open, not just a hover. Unfortunately, the rebuilt site’s menu doesn’t function and it’ll require absolute links to work in the various root and sub folders.

This is one suggestion I found in the archives here, http://www.pmob.co.uk/temp/drop-down-expand5.htm, but it doesn’t quite look like what I need. Any suggestions would be appreciated. I have other sites that are for persons with disabilities that this could be useful for, so I need to be able to reproduce the results.

2

The first thing that jumps out is that you’re trying to get the lists by their id, but they only have class names. Is it possible to change the <ul class="a"> so that it’s <ul id="a"> instead? And if it is, does that fix the problem?

3

I changed the class to ID in the html and the corresponding CSS, but no change.

The code is copied almost directly from the Yahoo CMS, it’s just no longer relying on the PHP to work. My question is why the nav menu is in a form. The original, that works, does this and I copied it over thinking it was something I hadn’t ran into yet.

4

Can you upload the new version that has ids instead of classes? What kind of error message are you getting now?

5

No errors, just remaining to have no function. Changes have been uploaded.

6

Okay, I figured it out. The problem was in the “changeNode” function. It was trying to determine if the list was already visible or not based on the CSS rules that were currently affecting the page. Maybe that’s a better, safer way to figure that kind of thing out, but I felt it wasn’t really worth the effort. A way easier (and, like I was saying, arguably wrong) way to do it would be to just use the element’s own “style” object.

So I got rid of the “getStyleClass” function entirely, and changed “changeNode” to this:


function changeNode(nodeName) {
    var elem = document.getElementById(nodeName);
    if (elem.style.display == 'block') {
        elem.style.display = 'none';
        menustate = menustate.replace(nodeName, '');
    } else {
        elem.style.display = 'block';
        if (menustate.indexOf(nodeName) == -1) {
            menustate = menustate + nodeName;
        }
    }
}

You said that you would like to be able to use this on different sites, so keep in mind that it only works in this case because the menus start hidden. If you want to start with the menus showing, the code has to be altered a bit.

Also, I have no idea how friendly this is to people with disabilities, so you might want to get some advice from the Accessibility and Usability forum.

7

That worked quite well, thank you. A good reminder for me that I need to work a lot further on my Javascript skills.

8

Urgent help again please. The site is complete and up at it’s new host, 1&1, with the same address, http://www.continentalscrew.com/.

The navigation works fine on my own computer in multiple browsers and in my test site. However, now that it’s on its own host, it won’t work. When trying to navigate to a page, they come up with an error “method post not allowed.” What’s different here than the other places the site is at?

This site is now live, but not working for the client. Please help ASAP, thanks.

9

Links seem to work fine in Chrome/Win7…

10

I changed the form’s action from post to get and it is working again. Having the links inside a form doesn’t make sense to me, but it’s how the javascript has it setup. Thanks for checking sdleihssirhc, going to further browsers was my next step.