Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Question Sprite Navigation with drop down sub navigation

    Can you help, im in need of an idea of how to solve an issue.

    I want to put a drop down menu like this >

    Here is my site at the moment > http://www.sparekeys.org.uk/

    Really struggling to get my head around how to impliment a jquery drop down effectively into this.

    Please help me

    Thanking in advance.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Not sure this is anything to do with sprites...

    First off you need to add the next level dropdown into your markup by nesting another ul within your #nav li. I'd recommend the next step to be getting the menu to display properly using css, because you need that right before the jQuery. Include in this the drop down (so people with javascript disabled can still access your dropdown). Then you can add some jQuery animation to the dropdown, assuming that's what you want to do.

    Suckerfish is a good place to start for the dropdown.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Ideally I want it too look like this http://www.lwis.net/free-css-drop-do...orizontal.html

    As the end result.

    Il take a look at the link and see how I get on.

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    In the link you rpovided, all the coe you would need is there in the source. I can't see any JQuery aspect in it. It's the same if I have JS disabled, presumably, because it is a css drop-down menu.

    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Im still struggling on how to achieve this idea with sprites?

    this is what i achieved so far please see link above.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have you got the sprite set up? If so then it's just a question of applying the appropriate background, using the sprite, to your drop down links, which I see you now have working.

  • #7
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Do you know of any sites that you could show me an example of this is action, as im still a bit hazy, i think i kind of get it.

    show the image then the image hidden underneath on hover show the rest of that part of the sprite that i want to show.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    This might be the sort of thing you're after.

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts
    The link you have shown me, is what I have already achieved.

    this is my sprite http://sparekeys.org.uk/images/navigation.png

    i want to display a drop down menu when i hover over the keys or locks part etc.

    would i do this with a larger image with a transparent like the sprite i have shown above but with big drop downs on the image but hidden in the css until the keys hover is activated? If that makes any sense at all.

    Thanks

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I'm not clear what you're asking. Your sprite includes images for your top menu but not the dropdown. There's nothing to stop you adding images for your dropdown to this same sprite image, if that's what you're asking.

    Then use the background position css settings to display the image you want. You can display a part of the image on :hover by using the :hover pseudo class. So:

    Code:
    #nav li a{background: transparent url(mysprite.png) no-repeat -100px 0}
    #nav li a:hover{background-position: -100px -50px}
    or whatever. You'll need to apply your image to each li rather than just the ul as now.

    Still not sure I've answered your question.

  • #11
    Regular Coder
    Join Date
    Jul 2007
    Location
    Essex, United Kingdom
    Posts
    161
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I'm not sure what im asking, im looking for a simple way to be able to have multi level sub navigation with the navigation i already have in place.

    And i can't for the life of me seem to get my head around how to achieve this.

    Its rather annoying, I feel stupid.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Ok - first your dropdowns - you've got this in your html but only the text displays, no background or anything, except on :hover, and that's not the right image anyway.

    You need to apply a different background to that dropdown a element. Something like:

    Code:
    #nav ul a{background:transparent url(mysprite.png) -100px 0px no-repeat}
    is going to set your background on dropdown elements only (because of the #nav ul selector). So, sort out your background images for your dropdowns, both normal and with hover, and then amend your css to reflect that.


  •  

    Posting Permissions

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