Bugün, Mozilla firefox‘ un web site tasarımcılarına sağlamış olduğu css komut desteğinden faydalanarak aynı zamanda açık kaynak kodlu örnek wordpress, phpbb3, joomla vs., siteler için eklentisiz hareketli sidebar yapımını sizlerle paylaşacağım. Açılan sayfada sağdaki sidebar’ a baktığınızda hareket kazandırılmış olduğunu – mouse ile üzerine gelindiğinde sidebar’ın normal moda geçtiğini görebilirsiniz.
Dinamik sidebar yapımının inceliği siteye ek görsellik kazandırmaktan öteye birşey değildir. Ancak kodlarda değişiklik yapılarak geliştirilebilir yada farklı bölümlerde kullanılabilir. Bunlar tamamen kod tasarımcının elindedir.
Sidebar için kullanacağımız HTML kodlarımız;
<div class="DinamikSidebar">
<div class="DinamikSidebar-Yon">
<!-- Sidebar içeriğimiz -->
</div>
</div>
Sidebar’a hareket kazandıracak CSS kodlarımızda şöyle;
.DinamikSidebar {
perspective: 800px;
}
.DinamikSidebar-Yon {
transform: rotateY(-25deg);
transition: transform 1s;
}
.DinamikSidebar-Yon:hover {
transform: rotateY(0deg);
}
Sidebar Sayfamızı yukarıdaki html kodlarımızda içerik bölümüne eklememiz ve css kodlarımızıda stil sayfamıza eklememiz yeterli olacaktır. İşin üzücü yönü bu css komutlarının sadece mozilla firefox tarafından desteklenmesidir. Diğer tarayıcılarda bu css komutları algılanamıyor. Herhangi bir hata ile karşılaşılmıyor. Umarım diğer tarayıcılarda enkısa zamanda bu ve benzeri özellikleri destekler.
