Animated List With Target
This experiment was inspired by an article written by¬†Chris Coyer from css-tricks.com.¬†But i decide to make the experiment little more interesting and beautiful, with some of the best features of CSS3, like
keyframes ¬†and the newest CSS3 selectors (
:target / ¬†
So, first create your basic HTML structure, with a 3 links menu like¬†
<ul><li><a>...</a></li></ul> on which links are related to a specific div with
ID. ¬†Maybe, you already know this technique, to
:target some elements with selectors, but here, we add an effect, to make this element much easier to find, with a little
transformation, we decide to
translate by 20px the
:target text block on
X axis, and this, with a quick
border-left appear effect.
PS: As you can see, the navigation menu is created with this item posted on cssdeck.