SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help Needed Please! - CSS or JS problem?

    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.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    	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..........
    Code:
    .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.

  4. #4
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •