Bootstrap 3 için Açılır Kapanır Sidebar Menu

Bootstrap ile web arayüzü çalışması yaparken, sidebar menu olarak hazır şablon kullanmak istiyordum. İstediğim gibi bir şablon bulamadığım için, startbootstrap.com sitesinden indirmiş olduğum sb admin 2 şablonu üzerinde değişiklik yaptım. Yazı bu konuyla ilgili yaptığım çalışma hakkında.

Bootstrap Nedir ?

Bootstrap, Twitter tarafından geliştirilmiş, esnek, mobil platformlar ile uyumlu web uygulamalar geliştirmeye yarayan popüler bir html, css ve javascript framework’üdür. Çok önemli bir özelliği, geliştirdiğiniz uygulamanın, tablette, mobilde ve bilgisayarda düzgün ve orantılı görünmesidir. Responsive kelimesi ile bu durum kastedilmektedir. Bootstrap bu özelliği, grid sistemi dediğimiz yapı ile sağlamaktadır. Bootstrap dışında da grid sistemi sunan frameworkler var. Foundation ve responsive grid system’i bu tür frameworklere örnek olarak verebiliriz. Hepsinin kendine göre artıları ve eksileri var. Fakat popülarite ve kullanım kolaylığı açısından bootstrap’ın biraz daha öne çıktığını söyleyebiliriz.

Bu yüzden kendi web uygulamamı tasarlarken bootstrap kullanmaya karar verdim. Bootstrap’ın örnek template’lerine baktım, fakat daha işlevsel ve güzel temalar aramaya karar verdim. Paralı temalardan metronic’i çok beğenmiştim. Metronic’te kullanılan sidebar menu tasarımına benzeyen bir yapı kullanmaya karar verdim.

metronicsidebarmenu

Araştırmalarım sonucunda, startbootstrap.com sitesinde görmüş olduğum sb admin 2 temasını baz almaya karar verdim. Bu temada bulunan sidebar menu’ye açılıp kapanmaya yarayan bir buton eklemeye karar verdim. Böylece son kullanıcı, gerektiği zaman menüyü kapatabilecek ve sayfada yer kaplamasını engelleyecektir.

sb admin 2 teması

sbadmin2

Orjinal sb admin 2 teması metis menü pluginini kullanıyor. Sol tarafta bulunan menü panelinin tamamen kapatılıp açılır bir hale getirmek istiyorum. Bununla birlikte menü kısmının kapalı halde kullanılabilmesini istiyorum.

xh79scjm2j

Dikkat ederseniz, buton ile sol panel kapatıldığı halde, menü kullanılabilir durumda. MetisMenu, bu durumda tıklamadan fare işaretçisi ile üzerine gelince otomatik olarak açılıyor. MetisMenu bir jquery plugini. Hover özelliğinin kullanımı ile ilgili olarak kendi sitesinden daha detaylı bilgi alabilirsiniz.

github üzerinden tüm dosyalara ulaşabilirsiniz.

codepen gösterimi

1 düşünce - “Bootstrap 3 için Açılır Kapanır Sidebar Menu”

  1. merhaba, verdiğiniz örnekte sol menünü ilk açılıştı kapalı olması için gereken nedir? yardımcı olursanız çok sevinirm

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top