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

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

分类：导航菜单 > 下拉导航难易：初级

查看演示下载资源下载积分： 20 积分

导航菜单html代码

<nav class="cd-3d-nav-container"> 
    <ul class="cd-3d-nav"> 
        <li class="cd-selected"> <a href="http://www.sucaihuo.com/">Dashboard</a> </li> 
        <li> <a href="http://www.sucaihuo.com/js/550.html" target="_blank">PHP检测中文验证码实例演示</a> </li> 
        <li> <a href="http://www.sucaihuo.com/js/551.html" target="_blank">jQuery仿京东检测验密码强度</a> </li> 
        <li> <a href="http://www.sucaihuo.com/js/552.html" target="_blank">jQuery放烟花插件</a> </li> 
        <li> <a href="http://www.sucaihuo.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;
    };
});