原生实现导航菜单效果 

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生实现导航菜单栏效果</title>
    <style>
        * {margin:0px; padding:0px;}
        a{
            text-decoration: none;
            color: black;
        }
        dd:hover{
            background: #38f;
            text-decoration: none;
            color: #fff;
        }
        dl {background:#fff;display:none;margin-left: -10px;margin-top: 10px;
            width: 70px;font-size: 15px;
            border: 1px solid #d1d1d1;z-index: 302;-webkit-box-shadow: 1px 1px 5px #d1d1d1;
            transform-origin:50% 0;
            -webkit-animation:gary .5s ease-in;
            transition: all .3s ;}
        dd{
            display: block;
            text-align: left;
            margin: 0!important;
            padding: 0 9px;
            line-height: 26px;
            text-decoration: none;
        }
        @-webkit-keyframes gary{
            0%{transform:scale(1,0);}
            25%{transform:scale(1,1.2);}
            50%{transform:scale(1,0.85);}
            75%{transform:scale(1,1.05);}
            100%{transform:scale(1,1);}
                                    }
</style>
</head>
<body>
<div id="d1" style="margin-left: 50px;display: inline-block">选项卡
    <dl style="">
        <dd><a href="" onclick="tiyan(this)">菜单1</a></dd>
        <dd><a href="" onclick="tiyan(this)">菜单2</a></dd>
        <dd><a href="" onclick="tiyan(this)">菜单3</a></dd>
        <dd><a href="" onclick="tiyan(this)">菜单4</a></dd>
    </dl>
</div>

<script src="JS/jquery-3.3.1.js"></script>
<script>
    var $d1 = $('#d1');
    $d1.mouseover(function () {
        var $dls = $('dl');
        $dls.css("display", "block");
    });
    $d1.mouseout(function () {
        var $dls = $('dl');
        $dls.css("display", "none");
    });
    function tiyan(obj) {
        alert('执行了'+obj.text)
    }
</script>
</body>
</html>

代码如上







            

            
posted @ 
2019-07-03 23:39 
xiaomogugu 
阅读(427) 
评论(0) 
编辑 
收藏 
举报