悬浮在网页右侧并可依次展开的菜单导航

效果：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬浮在网页右侧并可依次展开的菜单导航</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body {
            font:12px/180% Arial, Helvetica, sans-serif, "新宋体";
            background:#DCDCDC;
        }
        a{
            text-decoration: none;
            color: #000;
            font-size: 14px;
        }
        li{
            list-style: none;
        }
        .list{
            position: absolute;
            right: 0px;
            top: 90px;
        }
        .list li{
            position: relative;
            right: -100px;
        }
        .list li a{
            display: block;
            width: 130px;
            height: 30px;
            line-height: 30px;
            margin-bottom: 2px;
            background-color: #fff;
        }
        .list li a:hover{
            color: #1974A1;
        }
        .list li a span{
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background-color: #636871;
            color: #fff;
            margin-right: 10px;
        }
        .list li a:hover span{
            background-color: #5FA429;
        }

    </style>
</head>
<body>
<div class="list" id="list">
    <ul>
        <li><a href="#"><span>0</span>Flash素材</a></li>
        <li><a href="#"><span>1</span>菜单导航</a></li>
        <li><a href="#"><span>2</span>时间日期</a></li>
        <li><a href="#"><span>3</span>焦点图</a></li>
        <li><a href="#"><span>4</span>tab标签</a></li>
        <li><a href="#"><span>5</span>jquery特效</a></li>
        <li><a href="#"><span>6</span>在线客服</a></li>
        <li><a href="#"><span>7</span>广告代码</a></li>
        <li><a href="#"><span>8</span>相册代码</a></li>
        <li><a href="#"><span>9</span>图片特效</a></li>
        <li><a href="#"><span>10</span>名站特效</a></li>
        <li><a href="#"><span>11</span>视频播放</a></li>
        <li><a href="#"><span>12</span>其他代码</a></li>
    </ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        var timer = null;
        $("#list").hover(function () {
            clearTimeout(timer);
            timer = setTimeout(function () {
                $("#list li").each(function (index,el) {
                    setTimeout(function () {
                        $(el).stop().animate({"right":0},300);
                    },50*index)
                })
            },200);
        },function () {
            if (timer){
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                $("#list li").each(function (index,el) {
                    setTimeout(function () {
                        $(el).stop().animate({"right":-100},300);
                    },50*index)
                })
            },200);
        })
    })
</script>
</body>
</html>
posted on 2019-02-18 14:17 xxcxxc 阅读(930) 评论(0) 编辑收藏举报