Kod Örnekleri: Responsive Multi-Level Menü

Responsive Mıulti-Level Menü ile tasarım işiyle uğraşanların veya yeni yeni kodlamada bir şeyler yapmaya çalışanlar için güzel bir örnek teşkil edecektir. Web sayfalarınızda rahatlıkla kullanabilirsiniz. Animasyon efekti ile sade ve şık bir görünüme sahiptir.

Projelerinizde veya işlerinizde birçok içeriğe ve alt menüye sahip menüler için yer kazanmak için kullanabilirsiniz. Bu menüdeki her alt seviye kendi bağlamında gösterildiğinden ve her seferinde ana menüye dönme sıkıntılarından kurtuluyorsunuz. Farklı farklı animasyon class tanımlamaları kullanılarak yapılmıştır. Tasarımlarınız da kolaylıkla ve az yer kapladığından her yerde kullanılabilir.

HTML açıklamasını ve sırasız listeleri kullanarak açılan menüyü aşağıdaki gibi oluşturun.

<div id="dl-menu" class="dl-menuwrapper">
    <button class="dl-trigger">Open Menu</button>
    <ul class="dl-menu">
        <li>
            <a href="#">Item 1</a>
            <ul class="dl-submenu">
                <li><a href="#">Sub-Item 1</a></li>
                <li><a href="#">Sub-Item 2</a></li>
                <li><a href="#">Sub-Item 3</a></li>
                <li>
                    <a href="#">Sub-Item 4</a>
                    <ul class="dl-submenu">
                        <li><a href="#">Sub-Sub-Item 1</a></li>
                        <li><a href="#">Sub-Sub-Item 2</a></li>
                        <li><a href="#">Sub-Sub-Item 3</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

Responsive Multi-level Menü için gerekli CSS stilleri. Aşağıdaki CSS snippet'lerini web sayfanıza kopyalayın veya yerleştirin.

.dl-menu.dl-animate-out-1 {
    animation: MenuAnimOut1 0.4s linear forwards;
}

@keyframes MenuAnimOut1 {
    50% {
        transform: translateZ(-250px) rotateY(30deg);
    }
    75% {
        transform: translateZ(-372.5px) rotateY(15deg);
        opacity: .5;
    }
    100% {
        transform: translateZ(-500px) rotateY(0deg);
        opacity: 0;
    }
}

.dl-menu.dl-animate-in-1 {
    animation: MenuAnimIn1 0.3s linear forwards;
}

@keyframes MenuAnimIn1 {
    0% {
        transform: translateZ(-500px) rotateY(0deg);
        opacity: 0;
    }
    20% {
        transform: translateZ(-250px) rotateY(30deg);
        opacity: 0.5;
    }
    100% {
        transform: translateZ(0px) rotateY(0deg);
        opacity: 1;
    }
}

Kullanmak istediğiniz yerde ise aşağıdaki kodları yazmanız yeterlidir.

$ ( '# dl-menu' ) .dlmenu ({
     animationClasses : { classin : 'animasyon-sınıf-adı' , classout : 'animasyon-sınıf-adı' } 
});

Responsive Multi-Level Menü Demo görünümü için tıklayıız.
Responsive Multi-Level Menü İndirmek için tıklayıız.

Umarım faydalı olmuştur. Görüş ve önerilerinizi yorum bölümünde bekliyorum.