In this first image, I have lightened the whole site using a white rectangle overlay with a soft light blend. You can also see the edge of the content poking out of the ‘pocket’ – if this was an actual design brief, I would probably add four separate page edges (in the fashion of stacked files) to indicate each of the menu option.
And in the image below, one of the menu buttons has been selected because some content is showing (it would have glided from left to right into position):
As this was just a workshop, I have just used a screengrab of my previous design as the content page, but would in reality contain content relating to whichever of the menu options had been selected.
Last week we were introduced to the term Skueomorphism where design elements aim to replicate instantly recognisable real word objects, functionality, textures and processes etc. With Skueomorphism in mind, I have tried to replicate here a folder container from the real world, so that rather than each section being a reloaded static page, the user feels like they are being presented with a glossy folder with individual content sheets (much like those often produced in the print world for marketing / commercial purposes).
I feel that this is successfully achieved by simply continuing the left hand static background along the bottom, giving the impression that the content sheets are sitting inside a folder-type slip.
However, as the edging for the left hand portion is irregular, this would need to be taken into consideration when designing the content pages, and may require some adjustments to the edging in question.