Help Needed Please! - CSS or JS problem?

[roos3342]

Hey everyone, I'm a long time lurker, but first time poster! Thanks for all the help in the past I have gotten from reading your posts.

I have a website that I didn't design, but I'm being asked to work on, and I can't figure something out. I'm not sure where the problem lies. Hopefully this is an appropriate place to post this, if not, moderators, please move.

If you go to www.keystoneconsultingengineers.com and look at the navigation, you will see it's not exactly right. First off, when you first go, the second line of navigation has links in it that shouldn't be there! If you go too fast over the various headings, the navigation gets confused and will link to the wrong pages sometimes.

If there is a way to keep the sub headings up after you click on a subheading, that would be a bonus.

If anyone could give me any pointers as to where I can possibly look to fix either of these problems, that would be great! I have tried changing a few things in the css and the jquery files, but nothing seemed to work.

I appreciate all help.

Thanks.

[markbrown4]

Javascript is doing a bit of the heavy lifting here..
Honestly, I'd just switch out the menu with something better, the effects are dated and tacky.
I would just start fresh with something similar to the suckerfish drop down menus.

[Paul O'B]

Hi,

It looks to me as though you are hiding the submenu by setting the opacity to zero but that still leaves the links active but just invisible which means the menus are all on top of each other so you will be getting mixed messages dependng where you click and which is on top.

If you move the menu out of the way with a top position the it seems to work ok. See changes in bold

e.g.

	var parent = jQuery(this).parent();
                var cur_sub = jQuery("ul", parent);

                if ( !jQuery(cur_sub).hasClass("main-active") ){

                	jQuery(".main-active").removeClass("main-active").animate({opacity: 0.0}, 000).css('top','-999em');
				
                    jQuery(".hfca-blue #slide-hover").stop(true, false);
                    jQuery(".hfca-blue #slide-hover").animate({left:  jQuery(parent).position().left + "px"}, 200);
                    jQuery(".hfca-blue #slide-hover").animate({width:  jQuery(parent).width() + "px"}, 100);
                    
                    
                    jQuery(cur_sub).addClass("main-active").animate({opacity: 1.0}, 000).css('top','27px');

                    jQuery( jQuery(cur_sub).parent() ).css("z-index","1000");

                }
		
		});
		
		jQuery(".hfca-blue").mouseleave(function(){

                jQuery(".main-active").removeClass("main-active").animate({opacity: 0.0}, 000).css('top','-999em');
etc..........

.hfca-blue ul ul{top:-999em}

However as Mark said you would be better off doing it with css first and then enhancing with JS. Take a look at the superfish menus which degrade nicely.

[roos3342]

Thanks Paul and Mark! I agree, it's really dated and tacky, I just have to convince them to let me change it!

Until then, I will try what Paul has suggested.

Thanks again!

~Roos