امروز میخوام با شما یه منوی کشویی به اشتراک بذارم. هدفمون اینه که تو سایتمون این منو جای کمتری رو اِشغال کنه،یک منوی بسیار زیبا با استفاده از قابلیت انیمیشن 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' }
});

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

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

6167 بازدید

۲ خرداد ۱۳۹۲ / آموزش

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

  • amir / در تاریخ ۱۹ خرداد ۱۳۹۲

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

    • علیرضا / در تاریخ ۱۹ خرداد ۱۳۹۲

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

      • محمد حسین / در تاریخ ۱۹ دی ۱۳۹۲

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

        • علیرضا / در تاریخ ۱۹ دی ۱۳۹۲

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

    ارسال پاسخ !

    بالا