jQuery右侧导航悬浮层

仿qq左侧导航栏，点击可以左右展开，html5+css3+js右侧导航菜单悬浮层，鼠标悬浮展开全部，鼠标离开恢复到初始收缩状态。

分类：导航菜单 > 图标导航难易：初级

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

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

悬浮层菜单

<div class="box">
    <a href='#'><span>0</span>Flash素材</a>
    <a href='#'><span>1</span>菜单导航</a>
    <a href='#'><span>2</span>时间日期</a>
    <a href='#'><span>3</span>焦点图</a>
    <a href='#'><span>4</span>tab标签</a>
    <a href='#'><span>5</span>jquery特效</a>
    <a href='#'><span>6</span>在线客服</a>
    <a href='#'><span>7</span>广告代码</a>
    <a href='#'><span>8</span>相册代码</a>
    <a href='#'><span>9</span>图片特效</a>
    <a href='#'><span>10</span>名站特效</a>
    <a href='#'><span>11</span>视频播放</a>
    <a href='#'><span>12</span>其他代码</a>
</div>

$(function() {
    var timer = null;
    $(".box").mouseenter(function() {
        clearTimeout(timer);
        var that = $(this);
        timer = setTimeout(function() {
            that.find("a").each(function(index, ele) {
                setTimeout(function() {
                    $(ele).stop().animate({right: 0}, 200);
                }, 50 * index);
            })

        }, 200)
    }).mouseleave(function() {
        if (timer) {
            clearTimeout(timer);
        }
        $(this).find("a").each(function(index, ele) {
            setTimeout(function() {
                $(ele).stop().animate({right: -110}, 200);
            }, 50 * index);
        })
    })
})