响应式多级菜单(Responsive Multi Level Menu)源代码分享(演示、下载) - 任刚 · Ren Gang - 我的设计笔记 世界设计 · 设计世界

HTML部分

<div id="dl-menu" class="dl-menuwrapper">
    <button>Open Menu</button>
    <ul class="dl-menu">
        <li>
            <a href="https://www.huawenonline.com">Item 1</a>
            <ul class="dl-submenu">
                <li class="dl-back"><a href="https://www.huawenonline.com">back</a></li>
                <li><a href="https://www.huawenonline.com">Sub-Item 1</a></li>
                <li><a href="https://www.huawenonline.com">Sub-Item 2</a></li>
                <li><a href="https://www.huawenonline.com">Sub-Item 3</a></li>
                <li>
                    <a href="https://www.huawenonline.com">Sub-Item 4</a>
                    <ul class="dl-submenu">
                        <li class="dl-back"><a href="https://www.huawenonline.com">back</a></li>
                        <li><a href="https://www.huawenonline.com">Sub-Sub-Item 1</a></li>
                        <li><a href="https://www.huawenonline.com">Sub-Sub-Item 2</a></li>
                        <li><a href="https://www.huawenonline.com">Sub-Sub-Item 3</a></li>
                    </ul>
                </li>
                <li><!-- ... --></li>
                <!-- ... -->
            </ul>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li>
        <!-- ... -->
    </ul>
</div>

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;
    }
}

JavaScript

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

请注意需要引入jQuery库

<script src="https://www.rengang.com.cn/js/jquery-1.9.1.js"></script>
<script src="https://www.rengang.com.cn/js/jquery.dlmenu.js"></script>
" /> 源代码 · 任刚 · Ren Gang - 我的设计笔记

源代码    62

响应式多级菜单(Responsive Multi Level Menu)源代码分享(演示、下载)

源代码      

全屏横幅Banner代码 – 全屏焦点图切换代码

源代码      

jQuery Tabbed Mmenu - 选项卡菜单实例

jQuery Tabbed Mmenu – 选项卡菜单实例

源代码      

jQuery 瀑布流图片相册布局源码

jQuery 瀑布流图片相册布局源码

源代码      

uSquare - WordPress 通用响应相册插件

uSquare – WordPress 通用响应相册插件

源代码      

jQuery 加载进度条 - “Sonic – looping loaders”

jQuery 加载进度条 – “Sonic – looping loaders”

源代码      

MiniGal Nano - 免费、简单、用户界面友好的 PHP/HTML/CSS 相册源码

MiniGal Nano – 免费、简单、用户界面友好的 PHP/HTML/CSS 相册源码

源代码      

登 录 注 册