One small change to HTML5 prototype template

We are prototyping an iPad app using HTML which we view on an iPad through a browser app.

We are using a template which was build previously and allows us to use a flat image of the screen we want to prototype, and hot spots to navigate between screens.

The only interaction on the screen which uses javascript is a slide in menu which is triggered by a hotspot button, and the menu currently slides in from the left of the screen, over the image which is the full screen. Currently a semi-transparent black mask covers the screen behind and when anywhere on the black mask is clicked, the menu slides away.

The change we want to make is that instead of the menu sliding in over the image, we want the image to be pushed to the right and not overlapped. The black mask would still need to show over the image which has moved to the right, so that when tapped, the menu and image would slide back toward the left to restore the screen.

It is not easy to explain so I have attached an image which shows in fig 1 the image (blue) with hotspot (red)

On click of the hotspot, currently the menu slides in over the top as shown in fig 2

We would like to achieve fig 3 where both the menu and image move across

Please note, I will give you our current working solution as a .zip file, you will need to edit the files and provide back to me.

The rest of the solution should work as it currently does.

If you have the right knowledge this should be very quick and easy so I am expecting quite low quotes, if your quotes are high please explain why as I will assume that means you don't already have the right knowledge and will be spending time researching. Please quote 'EVE' in your bid so I know you read this far and explain to me what you will do so I know you are capable.

Thanks

HTML HTML5 JavaScript jQuery / Prototype Website Design

Project ID: #4420335

About the project