ijquery

منو دراپ داون ریسپانسیو

screenshot

منوی دراپ داون با افکتهای بسیار جذاب همراه با قابلیت ریسپانسیو در 5 مدل مختلف

آموزش استفاده

  1. html
    <div id="dl-menu" class="dl-menuwrapper">
        <button>Open Menu</button>
        <ul class="dl-menu">
            <li>
                <a href="#">Item 1</a>
                <ul class="dl-submenu">
                    <li class="dl-back"><a href="#">back</a></li>
                    <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 class="dl-back"><a href="#">back</a></li>
                            <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 -->

     

  2. css
    .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;
        }
    }

     

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

     


پیش نمایش دانلود فایل پلاگین

14 دیدگاه دربارهٔ «منو دراپ داون ریسپانسیو»

  1. سلام ببخشید می خواستم قسمت اول این (click to open)نباشه یعنی اول بسم الله منوها ظاهر باشن چطور باید این کار را کرد؟

  2. شرمنده هرکار کردم نشد میشه بیشتر توضیح بدهید(میخوام لیست منوهام بیاد بدون کلیک روآیکون لیست (آیکون لیست رو درواقع میخواهم حذف کنم) )(انجام این کار برام مهم)

  3. سلام
    اول تشکر میکنم از سایت فوق العادتون . فکر نکنم تو ایران دیگه چنین سایتی وجود داشته باشه . دمتون گرم .
    یه خواهش هم داشتم
    من یه وبلاگ تو رزبلاگ دارم . میخوام واسه صفحات جداگانه اش از این منوی شما استفاده کنم و توش لینک دانلود بذارم
    فقط یه مشکل دارم . وقتی از این منو شما استفاده میکنم دیگه امکان ارسال نظر واسه مخاطب ها تو اون صفحه از بین میره و دیگه اون فرم ارسال نظر نیست که بشه واسه اون مطلبی که تو اون صفحه جداگانه گذاشتم نظر فرستاد .
    ممنون میشم اگه راهنمایی کنید که چجوری میتونم اون فرم نظر رو بیارم تو اون صفحه تا بشه نظر فرستاد .
    لطفا راهنمایی کنید . خیلی نیز دارم .
    ممنون

  4. با سلام
    چطور میشه شکل یا رنگ همون آیکون اولیه که روش کلیک می کنیم و منو عوض میشه رو عوض کرد؟
    بصورت ایمیج هستش یا کاراکتر و کده؟!
    ممنون میشم راهنمایی بفرمایید.
    در یکی از سایت های جوملایی که بک گراند سفید است و این آیکون هم سفید به نمایش در می آید و عملا دیده نمی شود.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *