Katlanarak Açılan Navigasyon div Tasarımlı Menü

   Bu  zamana kadar görmeye pek alışık olmadığınız bir menü örneği.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.

Mouse ile Bilgi Cafem 61yazan 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ış olsa da bu tip bir drop down örneğini aklınıza gelebilecek her yerde kullanabilirsiniz.Arşivinizde bulunmasını kesinikle önerdiğim örneklerden bir tanesi.
Aşağıda ki CSS kodlarını Blogger şablon kodları içerisinde ki Head etiketleri arasına eklemeniz gerekiyor.

body { background: #E9E9E9; }<br /> h2 { text-align: center; color: #CCC; }<br /> a {<br /> display: block;<br /> text-decoration: none;<br /> width: 100%;<br /> height: 100%;<br /> color: #999;<br /> }<br /> <br /> a:hover { color: #777; }<br /> <br /> /* NAVIGATION */<br /> .navigation {<br /> list-style: none;<br /> padding: 0;<br /> width: 250px; <br /> height: 40px; <br /> margin: 20px auto;<br /> background: #95C11F;<br /> position: relative; <br /> z-index: 100;<br /> }<br /> <br /> .navigation, .navigation a.main {<br /> border-radius: 4px;<br /> -webkit-border-radius: 4px;<br /> -moz-border-radius: 4px;<br /> }<br /> <br /> .navigation:hover, .navigation:hover a.main {<br /> border-radius: 4px 4px 0 0;<br /> -webkit-border-radius: 4px 4px 0 0;<br /> -moz-border-radius: 4px 4px 0 0;<br /> }<br /> <br /> .navigation a.main {<br /> display: block; <br /> height: 40px;<br /> font: bold 15px/40px arial, sans-serif; <br /> text-align: center; <br /> text-decoration: none; <br /> color: #FFF; <br /> -webkit-transition: 0.2s ease-in-out;<br /> -o-transition: 0.2s ease-in-out;<br /> transition: 0.2s ease-in-out;<br /> position: relative;<br /> z-index: 100;<br /> }<br /> <br /> .navigation:hover a.main {<br /> color: rgba(255,255,255,0.6);<br /> background: rgba(0,0,0,0.04);<br /> }<br /> <br /> .navigation li { <br /> width: 250px; <br /> height: 40px;<br /> background: #F7F7F7;<br /> font: normal 12px/40px arial, sans-serif !important; <br /> color: #999;<br /> text-align: center;<br /> margin: 0;<br /> -webkit-transform-origin: 50% 0%;<br /> -o-transform-origin: 50% 0%;<br /> transform-origin: 50% 0%;<br /> -webkit-transform: perspective(350px) rotateX(-90deg);<br /> -o-transform: perspective(350px) rotateX(-90deg);<br /> transform: perspective(350px) rotateX(-90deg);<br /> box-shadow: 0px 2px 10px rgba(0,0,0,0.05);<br /> -webkit-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);<br /> -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05);<br /> }<br /> <br /> .navigation li:nth-child(even) { background: #F5F5F5; }<br /> .navigation li:nth-child(odd) { background: #EFEFEF; }<br /> <br /> .navigation li.n1 { <br /> -webkit-transition: 0.2s linear 0.8s;<br /> -o-transition: 0.2s linear 0.8s;<br /> transition: 0.2s linear 0.8s;<br /> }<br /> .navigation li.n2 {<br /> -webkit-transition: 0.2s linear 0.6s;<br /> -o-transition: 0.2s linear 0.6s;<br /> transition: 0.2s linear 0.6s;<br /> }<br /> .navigation li.n3 {<br /> -webkit-transition: 0.2s linear 0.4s;<br /> -o-transition: 0.2s linear 0.4s;<br /> transition: 0.2s linear 0.4s;<br /> }<br /> .navigation li.n4 { <br /> -webkit-transition:0.2s linear 0.2s;<br /> -o-transition:0.2s linear 0.2s;<br /> transition:0.2s linear 0.2s;<br /> }<br /> .navigation li.n5 {<br /> border-radius: 0px 0px 4px 4px;<br /> -webkit-transition: 0.2s linear 0s;<br /> -o-transition: 0.2s linear 0s;<br /> transition: 0.2s linear 0s;<br /> }<br /> <br /> .navigation:hover li {<br /> -webkit-transform: perspective(350px) rotateX(0deg);<br /> -o-transform: perspective(350px) rotateX(0deg);<br /> transform: perspective(350px) rotateX(0deg);<br /> -webkit-transition:0.2s linear 0s;<br /> -o-transition:0.2s linear 0s;<br /> transition:0.2s linear 0s;<br /> }<br /> .navigation:hover .n2 {<br /> -webkit-transition-delay: 0.2s;<br /> -o-transition-delay: 0.2s;<br /> transition-delay: 0.2s;<br /> }<br /> .navigation:hover .n3 {<br /> -webkit-transition-delay: 0.4s;<br /> -o-transition-delay: 0.4s;<br /> transition-delay: 0.4s;<br /> }<br /> .navigation:hover .n4 {<br /> transition-delay: 0.6s;<br /> -o-transition-delay: 0.6s;<br /> transition-delay: 0.6s;<br /> }<br /> .navigation:hover .n5 {<br /> -webkit-transition-delay: 0.8s;<br /> -o-transition-delay: 0.8s;<br /> transition-delay: 0.8s;<br /> }
Daha sonra Body kodları arasına aşağıda ki HTML kodlarını ekleyin.

<ul class="navigation"><a class="main" href="#url">Navigation</a> <li class="n1"><a href="#">Hileler</a></li> <li class="n2"><a href="#">İnternet</a></li> <li class="n3"><a href="#">Bilgisayar</a></li> <li class="n4"><a href="#">Yazılımlar</a></li> <li class="n5"><a href="#">Programlar</a></li> </ul>
Demo

Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...