CODEWITHSUNDEEP
javascripthtmlcssanimationnavigation
trinityfel
trinityfel

Reputation: 11

fade in navigation after page load

I'm trying to create a navigation menu where each "button" fades in in sequence after the page loads. I've done a bunch of google searching and have yet to come up with anything quite like what I'm looking for. Most have had to do with just animating the buttons themselves (i.e. change font color or background color when hovering). What I'm going for is that once the page loads, the sub menu "buttons" fade in across the top of the page. I feel like this could be done simply with CSS (and maybe javascript, though I'm not so good with that, so please be very clear with any ideas :-)), without the need to add in jquery. I'm not using any fancy software, just basic html coding.

Upvotes: 0

Views: 1753

Answers (2)

Syntax Error
Syntax Error

Reputation: 4527

You can do this with just CSS animations but it's not going to work in all browsers. Set up an animation then assign each button progressively longer delay times. This might not be the exact look you want though.

If you go the js route you'll be able to make it work better cross browser. I would suggest you go ahead and use jquery - it's not huge and it makes tasks like this way easier. I would approach your problem like this:

  1. Set initial state to opacity=0 for all buttons. (Edit: Or not. See comment below.)
  2. Call your fade-in function for each button in order, with an appropriate few milliseconds of delay between them if needed.

Your fade-in function should just be a loop that sets opacity for the element it was passed. Each iteration should increase the opacity by a set amount with an appropriate delay between iterations. As mentioned, jquery comes with a fadeIn() function.

Hope this helps.

Upvotes: 1

Will
Will

Reputation: 20235

Have you considered jQuery? jQuery has a fadeIn function that might be of interest to you, as well as many other cool things.

Here is an example of what I think you want using jQuery. http://jsfiddle.net/ngzmy/1/

As others have said, your other option would be CSS transition, which are not support in all browsers.

Upvotes: 2

Related Questions