Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Animating CSS ul navigation using jQuery

Discussion in 'Website Design Forum:' started by rosedani, Aug 17, 2011.

  1. rosedani

    rosedani Member

    Hi all,

    I'm currently in the process of designing a site for a friend of mine but wanted to add a little bit of animation to the main navigation bar to make it all look a bit more polished! My knowledge of coding is very limited so I am finding it quite difficult achieving the effect I'm after!

    I currently have the nav bar set up in it's own div tag and have created the usual ul style of navigation and then used the CSS background position property to position the nav bar sprite for a basic roll-over effect. What I'm after though is a smooth transition from the normal button state to the hover state so it looks like the hover state is slowly fading in.

    After searching around on Google I have quickly learnt that I will need to add jQuery to my site to achieve this effect. This is fine but I have yet to find a tutorial that teaches me how to get the specific effect I'm after!

    If possible could someone explain (in laymans terms) how I go about adding jQuery to the nav bar so it fades between the two states instead of snapping from one part of the sprite to the other? Alternatively, if anyone knows of a good tutorial on how to do this could you point me in the right direction?

    I've attached the sprite I'm working with below so you can see the normal and hover states.

    Thanks in advance

    Attached Files:

  2. Sunburn

    Sunburn Active Member

  3. rosedani

    rosedani Member

    Cheers for the link... I have looked at the jQuery site before for a suitable tutorial but can't seem to find one that achieves the look I'm after though... unless I'm blind now because of all the searching I've done over that past few weeks! :-(
  4. mrp2049

    mrp2049 Senior Member

  5. Kevin

    Kevin Senior Member

    As far as I'm aware you can't create fade-in rollovers with a single sprite image; you would need at least two.
  6. rosedani

    rosedani Member

    Just stumbled across these tutorials which I'm hoping will explain things! Watched the first one and it's starting to make sense! I'll let you know if these are decent tutorials so all other jQuery newbies can get themselves up and running!

    jQuery for Absolute Beginners: The Complete Series | Nettuts+


Share This Page