۲ خرداد

امروز میخوام با شما یه منوی کشویی به اشتراک بذارم. هدفمون اینه که تو سایتمون این منو جای کمتری رو اِشغال کنه،یک منوی بسیار زیبا با استفاده از قابلیت انیمیشن CSS. از این منو خیلی راحت میتونید در طرحهای ریسپانسیو ( واکنشگرا) خود استفاده کنید.

ساختار منو شامل یک لیست نامرتب هست که به هر تعداد که دوست دارید میتونید زیر منو بسازید:

<div id="dl-menu" class="dl-menuwrapper">
    <button>مون</button>
    <ul class="dl-menu">
        <li>
            <a href="#">مردانه</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="#">بازگشت</a></li>
                <li><a href="#">زیر منو ۱</a></li>
                <li><a href="#">زیر منو ۲</a></li>
                <li><a href="#">زیر منو ۳</a></li>
                <li>
                    <a href="#">زیر منو ۴</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="#">بازگشت</a></li>
                        <li><a href="#">زیر منو ۱</a></li>
                        <li><a href="#">زیر منو ۲</a></li>
                        <li><a href="#">زیر منو ۳</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div><!-- /dl-menuwrapper -->

به ادامه مطلب بروید تا قسمت های بعدی را هم ببینید..

انیمیشن ها در کلاس های انیمیشن تعریف می شوند:

 

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

@keyframes MenuAnimOut1 {
    ۵۰% {
        transform: translateZ(-250px) rotateY(30deg);
    }
    ۷۵% {
        transform: translateZ(-372.5px) rotateY(15deg);
        opacity: .5;
    }
    ۱۰۰% {
        transform: translateZ(-500px) rotateY(0deg);
        opacity: 0;
    }
}

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

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

و پلاگین به شرح زیر نامیده می شود:

$( '#dl-menu' ).dlmenu({
    animationClasses : { in : 'animation-class-name', out : 'animation-class-name' }
});

امیدوارم این آزمایش کوچیکو دوست داشته باشید!

مشاهده دموی اسکریپتدریافت اسکریپت

7652 بازدید

۴ دیدگاه برای این مطلب ارسال شده است !

  • ۱۹ خرداد

    این که کار نمی کنه نه دموش و نه دانلودش

    • ۱۹ خرداد

      چک شده، هم دمو کار میکنه، هم لینک دانلود، لطفاً دوباره چک کنید.

      • ۱۹ دی

        درست میگن کار نمیکنه!
        من که با کروم امتحان کردم نکرد با مرورگر دیگه رو نمیدونم دوست عزیز اگه کاملش کنید خیلی ممنون میشم. برای سایت خوبتونم مشکرم

        • ۱۹ دی

          آقا حل شد، من واسه جی کوئری از سرور گوگل استفاده کرده بودم، که به نظر میرسه واسه آی پی ایران بسته شده، الان تو خود اسکریپت گذاشتم، میتونید استفاده کنید. ♥

    ارسال پاسخ !

    بالا