▼

Sunday, February 28, 2016

Jquery ile Boostrap Açık-Kapalı Dikey Akordiyon Menü Oluşturmak - Designing Bootstrap Open-Close Vertical Accordion Menu with Jquery

Bu yazıda daha önce oluşturulan akordiyon menü sola yaslı açınıp kapanabilen bir yapıya dönüştürülecektir. Bu yazı daha önceki yazının devamı niteliğinde olup akordiyon menü anlatımı için bu yazıya bakmak gerekmektedir.

Öncelikle CSS kodlarını tanımlayalım:

<style>
        
        .menuContainerVyy
        {
            position:relative;
            width: 200px;
            height: auto;
            left:0;
            top:0;
            border-right: 3px solid black;
            background-color:Orange;            
        }
        
        .menuSubContainerVyy
        {
            overflow: hidden;
            background-color:White;
            margin-right:10px;
        }
        
        .menuButtonVyy
        {
            position: absolute;
            left: 100%;
            top: 50%;
            margin-left: -3px;
            margin-top: -15px;
        }
        
        .menuContainerVyy .nav
        {
            width: 200px;
        }
        
</style>

Burada önemli noktalardan ilki "position" tanımlamasıdır. Bu niteliği "relative" olan element mevcut konumuna göre göreceli olarak yerleştirilmektedir. Niteliği "absolute" olan element ise ebeveyn elementi "static" olmayan yani pozisyonlanmış elemente göre göreceli yerleştirilmektedir. Yazı içinde sunum maksadıyla taşıyıcı element "relative" olarak pozisyonlanmıştır. Taşıycı elementin bu niteliği "absolute" yapılarak ve kodları uygun yere konularak menü web uygulaması içinde istenilen bir yere konumlandırılabilir.

Burada bir diğer önemli nokta ise "overflow" niteliğidir. Bu nitelik değeri "hidden" yapılarak animasyonun menü kapsayıcı elementi sıkıştırırken iç yapıyı bozmaması sağlanmıştır. Yani sıkıştırma işlemi sırasında iç elementler kapsayıcı elementin içine sığmayarak taşmakta, bu durumda bu taşan kısımlar gizlenerek daha akıcı bir animasyon oluşturulmakta, ayrıca kapanma animasyonu sonunda menünün tamamen gizlenmesi sağlanmaktadır.

Sonraki aşamada javascript kodlarını tanımlayalım:

function toggleMenu(sender) {

            var parentElement = $(sender).parent("div");

            if (parentElement.width() > 0) {
                parentElement.animate({ width: '0px' }, "slow");
            }
            else {
                parentElement.animate({ width: '200px' }, "slow");
            }
        }

Yukarıda fonksiyon menü açma-kapama işlemini yerine getirmektedir. Bunu yaparken kapsayıcı elementin genişlik değerinin sıfır olup olmadığı kontrol edilmekte, durumu göre kapsayıcı element jquery "animate" fonksiyonu kullanılarak animasyonlu genişletilip daraltılmaktadır.

Bir önceki yazıdan farklı olarak menünün DOM içinde bulunmasında aşağıdaki kod yerine sınıf üzerinden arama yapan yeni kod kullanılmıştır:

#VerticalMenu1.nav.nav-pills.nav-stacked > li
.menuContainerVyy .nav.nav-pills.nav-stacked > li

Son olarak Bootstrap menü kodlarını sarmalayan HTML kodlarını ekleyelim:

<div class="menuContainerVyy">
<button class="btn btn-default menuButtonVyy" onclick="toggleMenu(this);" type="button">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
<div class="menuSubContainerVyy">
BURADA MENÜ KODLARI BULUNMAKTA!
</div>
</div>

Yukarıda yer alan kodlar çalıştırıldığında aşağıdaki sonuç elde edilmektedir:

at

1 comment: