Katlanarak açılan div tasarımı

Bu  zamana  kadar  görmeye  pek  alışık olmadığım bir menu  örneği.  Giuseppe Gerbino tarafından sadece Css3 kullanılarak hazırlanmış bir  örnek ve sanırım  bir  benzeri  şimdilik  yok. Drop  down açılır  kapanır  menüleri bilmeyen yoktur.  Bir  ana kategori  linki ve ana kategori  linki  altında  aynı mantık ama  farklı  kategorilere  açılan alt  linkler  diyebiliriz  buna.

Genellike  drop  down olarak açılan alt  kategorilere  aynı  sınıf  uygulanır  ve bütün  linkerin  özellikleri de  aynı şekilde  olur.   Gazeteyi  katlayıp  sonra makasla  adam resmi  gibi kestikten sonra  gazete  açıldığında  el ele  tutan adamlar  oluşurdu.  Bu  örnekte alt  kategorilerin her  biri  için farklı  bir  sınıf  atanmış ve her sınıfın kendine  özgü hareketleri  bulunuyor. Bunun sonucunda gazete örneği  gibi  açılıp kapanan bir  menü oluşuyor.

Mouse  ile Navigation yazan butonun üstüne geldiğiniz anda  üstten aşağıya  doğru menüler  açılmaya başlıyor. Her ne kadar bir  menü benzeri  örnek  olarak hazırlanmış olsada bu tip bir  drop down  örneğini aklınıza gelebilecek her yerde  kullanabilirsiniz.  Arşivinizde bulunmasını kesinikle  önerdiğim örneklerden bir tanesi. Denemedim ama Css  ile  arka plan pozisyonlarını  ayarlayıp bir  resim ekleyebilirseniz eğer resimler için kullanılabilir  hoş bir efekt  elde  edebilirsiniz.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm. 

Css : 

body { background: #E9E9E9; }
h2 { text-align: center; color: #CCC; }
a {
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
  color: #999;
}

a:hover { color: #777; }

/* NAVIGATION */
.navigation {
  list-style: none;
  padding: 0;
  width: 250px; 
  height: 40px; 
  margin: 20px auto;
  background: #95C11F;
  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-radius: 4px 4px 0 0;
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
}

.navigation a.main {
  display: block; 
  height: 40px;
  font: bold 15px/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: 250px; 
  height: 40px;
  background: #F7F7F7;
  font: normal 12px/40px arial, sans-serif !important; 
  color: #999;
  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) { background: #F5F5F5; }
.navigation li:nth-child(odd) { background: #EFEFEF; }

.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;
}

•  Body etiketleri arasına eklemeniz gereken bölüm. 

Html : 

<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>