Lists of Unique Menu

Bagi sobat yang belum memiliki ataupun mau merombak menu navigasinya, tidak salah lagi kalian telah datang ke sini karena sekarang Koben akan berbagi info membuat menu keren punya. Sebelum itu ada baiknya tolong di lihat beberapa koleksi artikel menu yang ada:

Dari kumpulan menu yg ada, ternyata masih ada satu kreasi navigation menu full stylish, unik, top banget bin edan eling :))
Nama dari menu berikut adalah 3D drop list menu. List menu dengan efek 3D saat melakukan hover. Dengan bantuan variable transform, transform-style, perspective dan backface-visibilitydemo

This demo has a bug in Firefox which looks like it is due to the way it handles 90 degrees.Stu Nicholls

KODE CSS

.menuHolder {
margin: 0;
text-align: center;
position: relative;
height: 40px;
z-index: 20;
background: #069;
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius: 8px;
box-shadow: 0 10px 5px -8px rgba(0, 0, 0, 0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {
display: inline-block;
display: inline;
}
.menuHolder ul.nav {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {
float: left;
display: block;
padding: 0 4px;
}
.menuHolder ul.nav > li {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li a.top-a {
display: block;
text-decoration: none;
margin-top: 4px;
float: left;
height: 36px;
}
.menuHolder ul.nav li a.top-a b {
display: block;
padding: 0 20px;
font: normal 14px/30px arial, sans-serif;
color: #fff;
}
.menuHolder ul.nav li:hover a.top-a {
background: #09c;
border-radius: 8px 8px 0 0;
-moz-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {
position: absolute;
top: 40px;
left: 4px;
background: #09c;
padding: 5px 0 10px 0;
border-radius: 0 0 15px 15px;
box-shadow: 0 10px 5px -8px rgba(0, 0, 0, 0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX (-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX (-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX (-90deg);
transform-origin: 0px 0px;
transform: rotateX (-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {
left: auto;
right: 4px;
}
.menuHolder ul.nav div ul {
padding: 10px 0;
list-style: none;
width: 140px;
margin: 10px 5px 0 5px;
float: left;
display: inline;
text-align: left;
background: #fff;
border-radius: 6px;
-moz-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {
margin-left: 10px;
}
.menuHolder ul.nav div ul.colRight {
margin-right: 10px;
}
.menuHolder ul.nav div ul.colSingle {
margin-left: 10px;
margin-right: 10px;
}
.menuHolder ul.nav div ul li {
float: left;
border-bottom: 1px dotted #09c;
margin: 0 5px 0 5px;
display: inline;
}
.menuHolder ul.nav div ul li: last-child {
border: 0;
}
.menuHolder ul.nav div ul li a {
display: block;
width: 105px;
text-decoration: none;
font: 13px/16px arial, sans-serif;
color: #069;
margin: 0;
padding: 4px 0 4px 15px;
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAKElEQVQImWNggIL87mX/87uX/WfABmCSxCtAFkDH+CWJshevg7BJAABfiE6jnPixaAAAAABJRU5ErkJggg==) no-repeat left center;
}
.menuHolder ul.nav div ul li a:hover {
color: #09c;
background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAICAYAAAA1BOUGAAAAKElEQVQImWNggIL87mX/87uX/WfABmCSxCtAFkDH+CWJshevg7BJAABfiE6jnPixaAAAAABJRU5ErkJggg==) no-repeat 1px center;
}
.menuHolder ul.nav div.col1 {
width: 160px;
}
.menuHolder ul.nav div.col2 {
width: 310px;
}
.menuHolder ul.nav div.col3 {
width: 460px;
}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX (0deg);
-webkit-transform: rotateX (0deg);
-o-transform: rotateX (0deg);
transform: rotateX (0deg);
}

KODE HTML

<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Kategori</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">Agama</a></li>
<li><a href="#url">Blogger</a></li>
<li><a href="#url">Celebritis</a></li>
<li><a href="#url">Coded</a></li>
<li><a href="#url">CSS</a></li>
</ul>
<ul class="col">
<li><a href="#url">Curhat</a></li>
<li><a href="#url">Facebook</a></li>
<li><a href="#url">Google</a></li>
<li><a href="#url">Hack</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">HTML</a></li>
<li><a href="#url">Informasi</a></li>
<li><a href="#url">Javascript</a></li>
<li><a href="#url">jQuery</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Category</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Kontes</a></li>
<li><a href="#url">Ragam</a></li>
<li><a href="#url">SEO</a></li>
<li><a href="#url">Snippet</a></li>
<li><a href="#url">Software</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Teknologi</a></li>
<li><a href="#url">Template</a></li>
<li><a href="#url">Testing</a></li>
<li><a href="#url">Tools</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Cat</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Trik dan Tips</a></li>
<li><a href="#url">Tutorial</a></li>
<li><a href="#url">Web</a></li>
<li><a href="#url">Widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Gadget</a></li>
<li><a href="#url">Google</a></li>
<li><a href="#url">Blogger</a></li>
<li><a href="#url">Blogspot</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email</a></li>
<li><a href="#url">Phone</a></li>
<li><a href="#url">Online Form</a></li>
<li><a href="#url">Jejaring</a></li>
</ul>
</div>
</li>
</ul>
</div>

Source: Demo Studio
Cari kode rotateX ( ganti dengan tanpa spasi (bentrok ama emot) pada KODE CSS.
Do you still want more the stylish menu?

See you on the next cool my article :)
Happy menyu \m/