HTML5 ve CSS3 ile Yaprak Menü

CSS’in transition  efektleriyle ilgili bir çok çalışma yaptık. Fiziksel efektlerinden de rotate ve bluru daha önce birkaç kez kullandık. Hadi gelin hem o bilgileri pekiştirelim hem de gayet şık bir menü tasarımı yapalım. Ama öncesinde aşağıdaki örnek .GIF dosyasını görüntülemenizde fayda var.

Yaprak Menü

Ya da canlı test etmek isteyebilirsiniz :

ÖRNEĞİ GÖRÜNTÜLE

Başlayalım

HTML5’in nav tagı ile başlıyoruz. HTML kodlarımız aşağıdaki şekilde :


<nav>
<ul class="top-menu">
<li><a target="_blank" href=http://www.adobewordpress.com/>Giriş</a><div class="menu-item" id="Giriş"></div></li>
<li><a target="_blank" href=http://www.adobewordpress.com/wordpress/>WordPress</a><div class="menu-item" id="WordPress"></div></li>
<li><a target="_blank" href=http://www.adobewordpress.com/photoshop/>Photoshop</a><div class="menu-item" id="Photoshop"></div></li>
<li><a target="_blank" href=http://www.adobewordpress.com/tasarim-unsurlari/html5-tasarim-unsurlari/>HTML5</a><div class="menu-item" id="HTML5"></div></li>
<li><a target="_blank" href=http://www.adobewordpress.com/tasarim-unsurlari/css/>CSS3</a><div class="menu-item" id="CSS3"></div></li>
</ul>
</nav>

Sırada CSS kodlarımız var.


#Giriş { background: #9f4040;}
#WordPress { background: #7a9f40;}
#Photoshop{ background: #b03c99;}
#HTML5 { background: #9f8340;}
#CSS3 { background: #40719f;}

nav{margin:0 auto;width:600px;margin-top:100px;}

.top-menu li {
-webkit-filter: blur(1px); -moz-filter: blur(1px);
-o-filter: blur(1px); -ms-filter: blur(1px); 
filter: blur(1px);  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='1');

font-family: Arial , sans-serif;
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
transition: all 0.6s ease; 
-webkit-transition: all 0.6s ease; 
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
.top-menu li:hover {
-webkit-filter: blur(0px); -moz-filter: blur(0px);
-o-filter: blur(0px); -ms-filter: blur(0px); 
filter: blur(0px);  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
margin: 30px 20px; 
}
.top-menu li:active {
margin: 30px 33px; 
}
.top-menu li a  {
width: 80px;
height: 80px;
z-index: 9999;
position: absolute;
top: 32px;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 12px;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear; 
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
 
}
.top-menu li:active a {
font-size: 16px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {	
width: 80px;
height: 80px;
display: block;
-webkit-transition: all 0.6s ease; 
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
-webkit-border-top-left-radius: 100px; 
-webkit-border-bottom-right-radius: 100px; 
-moz-border-radius-topleft: 100px; 
-moz-border-radius-bottomright: 100px; 
border-top-left-radius: 100px; 
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{ 
-webkit-border-top-left-radius: 80px; 
-webkit-border-bottom-right-radius: 80px; 
-moz-border-radius-topleft: 80px; 
-moz-border-radius-bottomright: 80px; 
border-top-left-radius: 80px; 
border-bottom-right-radius: 80px; 
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{ 
-webkit-border-top-left-radius: 50px; 
-webkit-border-bottom-right-radius: 50px; 
-moz-border-radius-topleft: 50px; 
-moz-border-radius-bottomright: 50px; 
border-top-left-radius: 50px; 
border-bottom-right-radius: 50px; 

}

Kapanış

Özellikle CSS3 elementlerini kullandığımız daha birçok tasarım hazırlayacağız.

Bu da ilginizi çekebilir  Wordpress Sitenizin Nav Menusune Arama Kutucuğu Eklemek

Menünün üzerine gelindiğinde bulanıklık kalkmakta fark ettiğiniz gibi. Fakat performans veya görsel açıdan bu efekti beğenmeyen olabilir. Dolayısıyla bluru kaldırmak isteyenler şu satırları silmeli : 10, 11, 12, 24, 25, 26. Silmeye alttan başlarsanız satırlar kaymadığı için problem yaşamazsınız.

İyi çalışmalar.



  • tasarımcı

    Kapanışta yazdığınız uyarı iyi olmuş. Firefoxun bazı versionlarında çalışmayabiliyor çünkü.

  • karabasan

    exploler 10 sürümü altı tarayıcıda bakmayı bir deneyin isterseniz ? ya da bunu kişilere belirtin.