I am looking to build a home page for a website. I would like the home homepage to have 4 or 5 rectangles, one after the other, down the centre of the page. Each of the these rectangles will have an image (to the left) and some text (to the right) inside them.
When the user mouses over each rectangle, I would like it to extend vertically down the page by 4-500 pixels (maintaining it’s horizontal length), and have the rectangles bellow the one being moused over, move down the page as well (to accommodate the expanded ‘drawer’). When the mouse is taken out of the ‘drawer’, the ‘drawer’ retracts to form the original rectangle and the other rectangles go back to their original positions.
The contents of the ‘drawers’ will be text and images, with the original rectangle remaining stationary and acting as the title, or header, for the ‘drawer’. My question is: how would I accomplish the task of having each of the rectangles expand, have the other rectangles move at the same time, and then retract when the mouse is taken away.
I am guessing this would be done with CSS transition stuff (and maybe some fancy HTML5 stuff as well?), but that is where my knowledge of CSS ends. I realise this is quite a large, and complex, question so any help would be much appreciated.
Many Thanks.
You are looking for something similar to what are called accordion menus. They can indeed be accomplished via the CSS3
transitionproperty. No HTML5 feature is particularly needed. See here for an example. One little difference in the example is that the first menu item stays expanded when you hover away, whereas you seem to want to collapse it. But tweak this example a little and I think you should have what you need.