一级菜单

<div id="navList" class="navlist-wrap">
    <div class="navlist clearfix">
        <a href="javascript:void(0);" class="nav-btn" data-device="#androidItem">Android<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#iphoneItem">iPhone<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#ipadItem">iPad<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#pcItem">PC<span>&nbsp;&nbsp;&nbsp;</span></a>
        <a href="javascript:void(0);" class="nav-btn" data-device="#macItem">MAC<span>&nbsp;&nbsp;&nbsp;</span></a>
    </div>
</div>

子菜单代码

<div id="expandZone" class="expand active">
    <div class="download">
        <div id="ipadItem" class="item">
            <div class="download-list">
                <a href="https://jy.tp.yuanmeng.life/" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>
                <a href="https://jy.tp.yuanmeng.life/" class="btn apple"><span class="icon"></span><span class="text">AppStore免费下载</span></a>
                <a href="https://jy.tp.yuanmeng.life/" class="btn itools"><span class="icon"></span><span class="text">itools一键安装</span></a>
            </div>
        </div>
        <div id="pcItem" class="item">
            <div class="download-list">
                <a href="https://jy.tp.yuanmeng.life/" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>
            </div>
        </div>
        <div id="macItem" class="item">
            <div class="download-list">
                <a href="https://jy.tp.yuanmeng.life/" class="btn zj"><span class="icon"></span><span class="text">直接下载安装包</span></a>
            </div>
        </div>
    </div>
    <div id="closeBtn" class="close-btn"></div>
</div>

jquery菜单切换效果

$('#navList').on('click', '.nav-btn',
function(event) {
    if ($(this).hasClass('btn-active')) {
        $('#expandZone #closeBtn').click();
        return false;
    }
    var curIndex = $(this).index(),
    mlValue = '-' + curIndex * 100 + '%';
    if ($('#expandZone').hasClass('active')) {
        $('#expandZone .download').animate({
            marginLeft: mlValue
        });
    } else {
        $('#expandZone .download').css({
            marginLeft: mlValue
        });
    }
    var device = $(this).data('device');
    $(this).addClass('btn-active').siblings().removeClass('btn-active');
    $(device).addClass('item-active').siblings().removeClass('item-active');
    $('#expandZone').animate({
        height: '130px'
    }).addClass('active');
    return false;
});

$('#expandZone #closeBtn').on('click',
function() {
    $('#expandZone').animate({
        height: '0px'
    },
    function() {
        $(this).removeClass('active');
        $('#navList .btn-active').removeClass('btn-active');
    });
    return false;
});