Vertical Multicolor 3D Menu Use CSS3

Semakin susah saja menemukan artikel unik, gaya punya, berbeda dan full stylish :-s Okelah walaupun sukar mencari resource oke bgt, Koben akan berbagi satu web yang mungkin bisa menambah ilmu kita Script Tutorials. Silahkan kalian acak² yg ada disana :D Beben Koben si bloglang anu ganteng kalem tea akan mengangkat salah satu postingan dari @AramisGC yakni mengenai CSS3 vertical multicolor 3D menu. Menu ini backgroundnya bisa bergonta-ganti warna, serta dengan sub menu yang begitu dinamis :x
Koben sedikit berkreasi dengan membuatnya menjadi bergaya fixed menu ditambah dengan variable opacity agar terlihat makin maknyus :D Jadi begini...itu si CSS 3 vertical multicolor 3D menu seolah-olah menghilang, namun ketika disorot akan terlihat jelas nantinya ;))
Demo

http://jsbin.com/uhimok

Kode CSS Vertical Menu Multicolor 3D

#nav,#nav ul {
background-color: #89A;
list-style: none outside none;
margin: 0;
padding: 0;
opacity: .1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#nav:hover,#nav ul:hover {
opacity: 1;
}
#nav {
display: inline-block;
padding: 5px;
position: fixed;
width: 112px;
-moz-perspective: 200px;
-ms-perspective: 200px;
-webkit-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
left: 10px;
top: 30px;
}
#nav ul {
left: -9999px;
opacity:0;
overflow: hidden;
padding: 5px;
position: absolute;
top: -9999px;
-moz-transform: rotateY(70deg);
-ms-transform: rotateY(70deg);
-o-transform: rotateY(70deg);
-webkit-transform: rotateY(70deg);
transform: rotateY(70deg);
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transition: -moz-transform .3s linear, opacity .3s linear;
-ms-transition: -ms-transform .3s linear, opacity .3s linear;
-o-transition: -o-transform .3s linear, opacity .3s linear;
-webkit-transition: -webkit-transform .3s linear, opacity .3s linear;
transition: transform .3s linear, opacity .3s linear;
}
#nav li {
background-color: #fff;
position: relative;
}
#nav > li {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#nav li a {
background-color: #ABC;
border-color: #ddd #555 #555 #ddd;
border-style: solid;
border-width: 1px;
color: #000;
display: inline-block;
font-size: 15px;
padding: 8px 10px 8px 5px;
text-decoration: none;
width: 95px;
-moz-transition: all .1s linear;
-ms-transition: all .1s linear;
-o-transition: all .1s linear;
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
#nav li:hover > a {
background-color: #89A;
border-color: #89A;
color: #fff;
}
#nav li:hover ul.subs {
left: 114px;
opacity:1;
top: 0;
-moz-transition-delay: .1s;
-ms-transition-delay: .1s;
-o-transition-delay: .1s;
-webkit-transition-delay: .1s;
transition-delay: .1s;
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
#nav ul li {
width: 100%;
}
.colorScheme {
list-style: none outside none;
overflow: hidden;
width: 120px;
position: fixed;
left: 10px;
top: 10px;
}
.colorScheme a {
cursor: pointer;
float: left;
height: 10px;
margin: 0 5px 5px;
width: 10px;
}
.colorScheme .clr1 {
background-color: #89A;
}
.colorScheme .clr2 {
background-color: #a8e;
}
.colorScheme .clr3 {
background-color: #8f88aa;
}
.colorScheme .clr4 {
background-color: #8aa;
}
.colorScheme .clr5 {
background-color: #8a8;
}
.colorScheme .clr6 {
background-color: #aa8;
}

#clr1:target ~ #nav, #clr1:target ~ #nav ul {
background-color: #89A;
}
#clr2:target ~ #nav, #clr2:target ~ #nav ul {
background-color: #aa889e;
}
#clr3:target ~ #nav, #clr3:target ~ #nav ul {
background-color: #8f88aa;
}
#clr4:target ~ #nav, #clr4:target ~ #nav ul {
background-color: #88aaaa;
}
#clr5:target ~ #nav, #clr5:target ~ #nav ul {
background-color: #88aa8a;
}
#clr6:target ~ #nav, #clr6:target ~ #nav ul {
background-color: #aaa188;
}
#clr1:target ~ #nav li:hover > a {
background-color: #8899AA;
border-color: #8899AA;
}
#clr2:target ~ #nav li:hover > a {
background-color: #aa889e;
border-color: #aa889e;
}
#clr3:target ~ #nav li:hover > a {
background-color: #8f88aa;
border-color: #8f88aa;
}
#clr4:target ~ #nav li:hover > a {
background-color: #88aaaa;
border-color: #88aaaa;
}
#clr5:target ~ #nav li:hover > a {
background-color: #88aa8a;
border-color: #88aa8a;
}
#clr6:target ~ #nav li:hover > a {
background-color: #aaa188;
border-color: #aaa188;
}

Markup HTML

<span id="clr1"></span>
<span id="clr2"></span>
<span id="clr3"></span>
<span id="clr4"></span>
<span id="clr5"></span>
<span id="clr6"></span>

<div class="colorScheme">
<a href="#clr1" class="clr1"></a>
<a href="#clr2" class="clr2"></a>
<a href="#clr3" class="clr3"></a>
<a href="#clr4" class="clr4"></a>
<a href="#clr5" class="clr5"></a>
<a href="#clr6" class="clr6"></a>
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Back</a></li>
</ul>

Lihat hasil kerja :)
Happy coding \m/