menu drop down dengan efek unfold

19 Sep 2013

Satu lagi menu navigasi minimalis dropdown dengan efek unfold yang sangat ringan di loading karena menggunakan 100% css. untuk penempatan menu ini terserah sobat mau diletakan dimana karena bentuk sang sangat simple dan fungsi dari menu ini bisa buat apa saja, kodenya silahkan lihat di bawah ini

Navigation
• item #1
• item #2
• item #3
• item #4
• item #5

.navigation {float:right;border-top:1px solid #444;
  list-style: none;
  padding: 0;
  width: 200px; 
  height: 35px; 
  margin: 10px;
  background: #333;
  position: relative; 
  z-index: 100;
}
.navigation, .navigation a.main {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
}
.navigation:hover, .navigation:hover a.main {border-bottom:1px solid #222;
  border-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
}
.navigation a.main {text-shadow:0 1px 1px #111;
  display: block; 
  height: 35px;
  font: bold 20px/40px arial, sans-serif; 
  text-align: center; 
  text-decoration: none; 
  color: #FFF;  
  -webkit-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  position: relative;
  z-index: 100;
}
.navigation:hover a.main {
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.04);
}
.navigation li { 
  width: 200px; 
  height: 35px;
  background: #333;
  font: normal 13px/40px arial, sans-serif !important; 
  color: #2C6891;
  text-align: center;
  margin: 0;
  -webkit-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: perspective(350px) rotateX(-90deg);
  -o-transform: perspective(350px) rotateX(-90deg);
  transform: perspective(350px) rotateX(-90deg);
  box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);
}
.navigation li:nth-child(even), .navigation li:nth-child(odd) { background: #333; 
    border-top:1px solid #444;border-bottom:1px solid #222;
}
.navigation li.n1 { 
  -webkit-transition: 0.2s linear 0.8s;
  -o-transition: 0.2s linear 0.8s;
  transition: 0.2s linear 0.8s;
}
.navigation li.n2 {
  -webkit-transition: 0.2s linear 0.6s;
  -o-transition: 0.2s linear 0.6s;
  transition: 0.2s linear 0.6s;
}
.navigation li.n3 {
  -webkit-transition: 0.2s linear 0.4s;
  -o-transition: 0.2s linear 0.4s;
  transition: 0.2s linear 0.4s;
}
.navigation li.n4 { 
  -webkit-transition:0.2s linear 0.2s;
  -o-transition:0.2s linear 0.2s;
  transition:0.2s linear 0.2s;
}
.navigation li.n5 {
  border-radius: 0px 0px 4px 4px;
  -webkit-transition: 0.2s linear 0s;
  -o-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
}
.navigation:hover li {
  -webkit-transform: perspective(350px) rotateX(0deg);
  -o-transform: perspective(350px) rotateX(0deg);
  transform: perspective(350px) rotateX(0deg);
  -webkit-transition:0.2s linear 0s;
  -o-transition:0.2s linear 0s;
  transition:0.2s linear 0s;
}
.navigation:hover .n2 {
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.navigation:hover .n3 {
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
.navigation:hover .n4 {
  transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
.navigation:hover .n5 {
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}

<ul class='navigation'>
<a class='main' href='#url'>Navigation</a>
<li class='n1'><a href='#'>item #1</a></li>
<li class='n2'><a href='#'>item #2</a></li>
<li class='n3'><a href='#'>item #3</a></li>
<li class='n4'><a href='#'>item #4</a></li>
<li class='n5'><a href='#'>item #5</a></li>
</ul>

Sobat bisa merubah kode kode tersebut sesuai kebutuhan dan tentunya serasikan dengan warna template sobat
Itulah cara bikin atau pasang menu navigasi dropdown dengan efek unfold dan Menu tersebut saya dapat dari CSSDeck

css

Taufik 12.39