固定底部圆形环绕导航

前端入坑纪 17

生命不息，更新不止！

素素的圆形环绕导航

OK，first things first！项目链接

HTML 结构

    <div id="Btns" class="navWrp impt">

        <a href="javascript:;">导航0</a>

        <a href="javascript:;">导航1</a>

        <a href="javascript:;">导航2</a>

        <a href="javascript:;">导航3</a>

        <a href="javascript:;">导航4</a>

        <a href="javascript:;">导航5</a>

    </div>
    <nav>
        <a id="mainBtn" class="navBtn" href="javascript:;">导航</a>
    </nav>

都是些必要的元素，没啥特殊

CSS 结构

        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        html,
        body {
            font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
            height: 100%;
            background: #fefefe;
            text-align: center;
        }
        
        .clear::after {
            content: "";
            display: table;
            clear: both
        }
        
        ul,
        li {
            list-style: none
        }
        
        .navWrp {
            display: none;
            position: fixed;
            z-index: 2;
            left: 50%;
            bottom: -20px;
            height: 160px;
            width: 160px;
            margin-left: -80px;
            /*border: 1px solid #ccc;*/
            border-radius: 50%;
        }
        
        .navWrp a {
            display: block;
            position: absolute;
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            font-size: 12px;
            background-color: skyblue;
            color: #fff;
            transition: all 200ms ease;
            z-index: 9
        }
        /*当隐藏时重置所有a的定位*/
        
        .navWrp.impt a {
            top: 80px!important;
            left: 60px!important;
        }
        /*所有a显示时a的各自定位*/
        
        .navWrp a:nth-child(1) {
            top: 60px;
            left: -20px
        }
        
        .navWrp a:nth-child(2) {
            top: 5px;
            left: 5px
        }
        
        .navWrp a:nth-child(3) {
            top: -20px;
            left: 60px
        }
        
        .navWrp a:nth-child(4) {
            top: -20px;
            left: 60px
        }
        
        .navWrp a:nth-child(5) {
            top: 5px;
            left: 115px
        }
        
        .navWrp a:nth-child(6) {
            top: 60px;
            left: 140px
        }
        
        nav {
            box-shadow: 0 0 1px #ccc;
            position: fixed;
            z-index: 3;
            width: 100%;
            left: 0;
            bottom: 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        
        .navBtn {
            position: relative;
            /*相对自己往上20px*/
            top: -20px;
            display: inline-block;
            width: 40px;
            font-size: 12px;
            color: #fff;
            border-radius: 50%;
            background-color: skyblue
        }

这个难点就是每个a的定位值，一般算下就可以了，或者直接用手动调，就是会费时点

JS 结构

        var oMbtn = document.getElementById("mainBtn"),
            obtns = document.getElementById("Btns"),
            obtnsA = obtns.getElementsByTagName("a");
        oMbtn.setAttribute("show", "off");
        oMbtn.onclick = function() {
            if (oMbtn.getAttribute("show") == "off") {
                obtns.style.display = "block";
                // obtns显示后，再开始动画
                setTimeout(function() {
                    obtns.className = "navWrp";
                }, 30);

                oMbtn.setAttribute("show", "on");
            } else {
                obtns.className = "navWrp impt";
                // 动画完成后，隐藏obtns
                setTimeout(function() {
                    obtns.style.display = "none";
                }, 300);
                oMbtn.setAttribute("show", "off");
            }

        }

这里用show属性来判定状态，然后不同状态，不同的点击效果

环绕的a点击完，隐藏的js没写，有兴趣的，可以自己mark。