Help needed with styling navigation list please

Discussion in 'CSS' started by typingmums, Apr 1, 2009.

  1. #1
    This is probably something very simple but its driving me nuts so I'm hoping someone here can help me out... pretty please!!

    I've put together a mock page for my client and at the moment we're just playing about with the navigation. They've given me the style of nav they'd like which I've pretty much been able to replicate, bar one problem!

    The style they'd like is at the top of this page, but vertical rather than horizontal:

    http://www.iinet.net.au/index.html

    This is what I've come up with so far... the problem being that when you scroll the flyout menu, the main menu item no longer shows the background image... how oh how oh how do I fix this??!!

    http://fontmedia.com.au/penair/index.html

    Please save me from myself!! haha

    Thanks in advance

    Rahelle
     
    typingmums, Apr 1, 2009 IP
  2. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Lots of views but no replies... :(

    Am I destined to never fix this??

    Time for me to blow the dust off my CSS books I think... I knew they'd come in handy one day!! :)
     
    typingmums, Apr 2, 2009 IP
  3. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    You will have to add JavaScript probably i guess. There needs to be a special class something like 'active' added on the parent Li when you hover on it. So that you can apply a background image to it that 'stays' while you browse/scroll the sub-menu items.

    The reference website u gave uses JQuery which actually makes it pretty easy. If you look under the hood, the site.js has these lines which adds a 'over' class to the parent Li on hover, and removes it when u move away from it.

    function initialiseDropdownMenus() {
      var options = {
        over: function() { $(this).addClass("over"); $("ul", this).bgiframe(); },
        out: function() { $(this).removeClass("over"); },
        timeout: 125
      };
    
      $("#product_nav .dropdown_menu li").hoverIntent(options);
    
      $("#header .dropdown_menu li").hover(
        function() { 
          $(this).addClass("over");
          $("ul", this).bgiframe(); 
        }, 
        function() { 
          $(this).removeClass("over"); 
        }
      );
    
    }
    HTML:
    Now don't just copy paste the above code snipet, understand and then use :)
     
    markupdude, Apr 2, 2009 IP
  4. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #4
    Very much appreciated... thanks so much .... I'll give it a try :)
     
    typingmums, Apr 2, 2009 IP
  5. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #5
    OK... I've edited it to how I think it should look to work for me, but alas... it doesnt! :(

    If you could help me out again please I would really really appreciate it - I am trying to learn this stuff :)

    function initialiseDropdownMenus() {
      var options = {
        over: function() { $(this).addClass("over"); $("ul", this).bgiframe(); },
        out: function() { $(this).removeClass("over"); },
        timeout: 125
      };
    
      $("#nav li").hoverIntent(options);
    
      $("#nav li").hover(
        function() { 
          $(this).addClass("over");
          $("ul", this).bgiframe(); 
        }, 
        function() { 
          $(this).removeClass("over"); 
        }
      );
    
    }
    HTML:
    Thanks once again :)
     
    typingmums, Apr 2, 2009 IP
  6. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #6
    typingmums, Apr 2, 2009 IP
  7. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #7
    le007, Apr 2, 2009 IP
  8. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #8
    If u would read carefully, that reads "JQUERY". You need to have JQuery added before you can expect that code to work. Just look into the code behind of your reference site.
     
    markupdude, Apr 2, 2009 IP
  9. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #9
    Thanks but I'm no Javascript expert (or novice come to that) so JQuery means absolutely nothing to me. I've taken it as far as I'm able to at the moment which is why I'm now happy to pay for the help.
     
    typingmums, Apr 2, 2009 IP
  10. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #10
    typingmums, Apr 2, 2009 IP
  11. typingmums

    typingmums Well-Known Member

    Messages:
    1,446
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    140
    #11
    Thanks so much to beesystem for a great job! For those interested the problem was a simple CSS problem rather than javascript (but something I certainly wouldnt have picked up on myself!)

    replacing "ul li a:hover" with "ul li hover:a" was all it too

    Great job beesystem! iTrader coming your way
     
    typingmums, Apr 5, 2009 IP
  12. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Oh and i though you needed it to work in IE6.
     
    markupdude, Apr 5, 2009 IP