0

I'm building a website for a client where the home page is just boxes of images. When you click one of the boxes, they animate and shift up into a menu bar and redirect you to the appropriate page.

I do not know how to do this effectively, without making the user look at a mostly blank page (with only the menu visible) for a few seconds before they are redirected.

Is there another more elegant way to do this?

I have a working example of the animation here: http://bit.ly/1eicvwg

And here is a picture of my menu bar and box images on the page at the same time. The menu items on the JSfiddle are just placeholders, and I'll be using the coloured boxes in the final version.

menu and boxes

What are your thoughts?

alex
  • 1,042
  • 4
  • 18
  • 33
  • Bind an Event which is triggered after Resize: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed – Stefan Brinkmann Dec 28 '13 at 20:35

1 Answers1

0

A couple of options, each of which indicate to the user that something is happening:

  • have some sort of "loading" animation present which is hidden until one of the menu boxes is clicked.
  • Load the contents of the desired page via ajax, and display a "loading" animation in the area where the new content will be displayed.

The latter, while more complicated, is likely to look more graceful (since you won't be performing an entire page refresh).

simmer
  • 2,639
  • 1
  • 18
  • 22