jQuery从顶部打开图标下拉导航菜单

收藏

分享一个常用的手机图标菜单，从天而降的弹出下拉菜单效果，演示效果最好在手机上查看。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

导航菜单html代码

<nav class="cd-3d-nav-container"> 
    <ul class="cd-3d-nav"> 
        <li class="cd-selected"> <a href="http://www.erdangjiade.com/">Dashboard</a> </li> 
        <li> <a href="http://www.erdangjiade.com/js/550.html" target="_blank">PHP检测中文验证码实例演示</a> </li> 
        <li> <a href="http://www.erdangjiade.com/js/551.html" target="_blank">jQuery仿京东检测验密码强度</a> </li> 
        <li> <a href="http://www.erdangjiade.com/js/552.html" target="_blank">jQuery放烟花插件</a> </li> 
        <li> <a href="http://www.erdangjiade.com/js/553.html" target="_blank">html5响应式触屏移动端音频播放器</a> </li> 
    </ul> 
    <span class="cd-marker color-1"></span> 
</nav>

jQuery(document).ready(function($) {
    //toggle 3d navigation
    $('.cd-3d-nav-trigger').on('click', function() {
        toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
    });

    //select a new item from the 3d navigation
    $('.cd-3d-nav a').on('click', function() {
        var selected = $(this);
        selected.parent('li').addClass('cd-selected').siblings('li').removeClass('cd-selected');
        updateSelectedNav('close');
    });

    $(window).on('resize', function() {
        window.requestAnimationFrame(updateSelectedNav);
    });

    function toggle3dBlock(addOrRemove) {
        if (typeof (addOrRemove) === 'undefined')
            addOrRemove = true;
        $('.cd-header').toggleClass('nav-is-visible', addOrRemove);
        $('main').toggleClass('nav-is-visible', addOrRemove);
        $('.cd-3d-nav-container').toggleClass('nav-is-visible', addOrRemove);
    }

    //this function update the .cd-marker position
    function updateSelectedNav(type) {
        var selectedItem = $('.cd-selected'),
                selectedItemPosition = selectedItem.index() + 1,
                leftPosition = selectedItem.offset().left,
                backgroundColor = selectedItem.data('color');

        $('.cd-marker').removeClassPrefix('color').addClass('color-' + selectedItemPosition).css({
            'left': leftPosition,
        });
        if (type == 'close') {
            $('.cd-marker').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
                toggle3dBlock(false);
            });
        }
    }

    $.fn.removeClassPrefix = function(prefix) {
        this.each(function(i, el) {
            var classes = el.className.split(" ").filter(function(c) {
                return c.lastIndexOf(prefix, 0) !== 0;
            });
            el.className = $.trim(classes.join(" "));
        });
        return this;
    };
});