The idea behind this example was to have some nicely arranged blocks and once you click on one of them, the block will start showing its hidden content starting at its current position.
Besides being a menu, this example can also serve as a perfect single page website. For example, just think that a block can be named “Contact” and could contain a nice contact form.
Nothing too complicated here, each block has a title that is hidden once its adjacent content will be triggered. Regarding tabindex will discuss a little later.
In the following rows I’ll try to explain a bit the styles that were used to create this example.
First of all we’re going to add some basic styles for our list wrapper including clearing floats. Also, you may have noticed the counter-reset: li; declaration, you’ve seen it before and we’ll use it further again to create a nice counter effect.
Below you can find the CSS rules used in order to add some basic styles for list elements.
Things to note:
On :focus we’ll use the same styling as on :hover. This is necessary when using keyboard’s tab key.
The CSS .cover class is dynamically added (with jQuery) to an li element when it’s triggered.
If the trigger is made through ENTER key, using outline: 0; declaration will help removing focus styling.
Above we’re using margin: 10px 0 0 10px; to add spacing between elements, now we have to clean some of them. Also we’ll colorize the li elements along with its content window and close button.
In this case, to colorize .content and .close for each li, it would have been great to just use background: inherit; declaration. But, due browser inconsistency we’re going to use the “hard” way, as you can see below:
Title, Content and Close
Regarding the styles for .content window:
When the .expanded class is added to it, its height and width are transitioned to cover the entire list.
Please notice the comments to see how the elements in the grid “respond” once they’ll be triggered.
In this screenshot, you can see the fifth block hovered.
Below you have the jQuery code, I think it’s quite easy to follow and understand:
Visible content window for the fifth element.
Regarding opacity, due its lack of support for older browsers, you’ll need to use the display toggleing for IE Trident:
Other existing CSS3 stuff like transitions and gradients and just play nice where the support allows it.
As you already noticed, we’ve used some CSS3 selectors that older browsers like IE8 and below do not support.
Thoughts on accessibility
The cool part is that along with HTML5, the tabindex attribute can be used on any HTML element. We’ll be using that in our example to enable tabbing navigation: <li tabindex="1">.
I really wanted this example to be accessible via keyboard and I made it. When tabbing, you have the possibility to trigger a window by pressing the ENTER key and then close it by pressing the ESC key:
I hope you liked this article and I’m looking forward to read your thoughts about it. Thanks for reading!