The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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.
    CSS file is here

    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.


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed