Grow your CSS skills. Land your dream job.

jQuery Fading Nav Bar w/Images

  • # November 22, 2008 at 2:18 am

    Hi all

    Been watching the screencasts on jQuery and playing around with some of the functions. Pretty cool stuff.

    so, I’m trying to create a nav bar, similar to the one seen above on this site, but using images instead of blocks and text. I got pretty close but it is still borky enough to be totally unusable. Wondering if there is any possible way this can be done. I managed to get one isolated button working using 3 stacked divs with background images. But I could not get a row of buttons, divs are block elements that span the page width. No way to line up multiple divs. or is there?

    So my workaround was create one long div with a background image. And nest 4 img elements in 4 a elements. But for some reason, when the jQuery ‘fadeout’ is called, the image gets all tweeky. Not smoothly fading as in the single button example.

    Best thing is to take a look to see what is going on.
    http://www.influxx.com/junk/jQ_nav.html
    CSS file is here
    http://www.influxx.com/junk/styles/navTest.css

    Any advice to get me in the right direction would be really cool. I’ve gotten about as far as I can on my own here. Frustration is setting in.

    Cheers
    adam

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".