CSS3 Exploding Menu
An experimental CSS transition to create animated random box effect.
Basically I just creating all random position by default using transform() method. And then fix all the current transformation when the input element is checked:
#open + label {background-color:something;} /* #open is a checkbox */
menu nav li {
/* Set the default transition for each item... */ }
menu nav li:nth-child(1) {/* Some random rules here... */}
menu nav li:nth-child(2) {/* Some random rules here... */}
menu nav li:nth-child(3) {/* Some random rules here... */}
menu nav li:nth-child(4) {/* Some random rules here... */}
menu nav li:nth-child(5) {/* Some random rules here... */}
menu nav li:nth-child(6) {/* Some random rules here... */}
menu nav li:nth-child(7) {/* Some random rules here... */}
menu nav li:nth-child(8) {/* Some random rules here... */}
menu nav li:nth-child(9) {/* Some random rules here... */}
menu nav li:nth-child(10) {/* Some random rules here... */}
menu nav li:nth-child(11) {/* Some random rules here... */}
menu nav li:nth-child(12) {/* Some random rules here... */}
/* Example random rules: transform:rotate(300deg) translate(200px,-100px) scale(0.4); */
And when the input element is checked, return all the transformations back:
#open:checked + label {background-color:something;}
open:checked ~ nav li {
transform:rotate(0deg) translate(0px,0px) scale(1); }
Here I also added a bit of toggle text technique with CSS pseudo elements, I hope this can be useful :)
#open + label:before {
content:"Text 1";
}
open:checked + label:before {
content:"Text 2"; }
Simple!
This menu works in all browsers except IE. Still works on IE9 but without transition.
Please note that the latest version of Opera was still not able to transitioning the CSS3
box-shadow and border-radius, so if you see this menu in the Opera browser, the animation may be somewhat different.