圆形导航栏

标签：menu transform li nth 圆形 type active 导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="new_file.css">
        <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_3847334_wldp4xtzko.css">
    </head>
    <body>
        <ul class="menu">
            <div class="toggle"><span class="iconfont icon-add"></span></div>
            <li class="active"><span class="iconfont icon-setting"></span></li>
            <li><span class="iconfont icon-home"></span></li>
            <li><span class="iconfont icon-user"></span></li>
            <li><span class="iconfont icon-game"></span></li>
            <div class="selected"></div>
        </ul>
        
        <script src="new_file.js"></script>
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}
body{
    height: 100vh;
    background-color: #222;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 设置图标 */
span.iconfont{
    font-size: 50px;
}
.menu{
    width: 300px;
    height: 300px;
    /* background-color: yellow; */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
/* 中心的白圆圈 */
.menu .toggle{
    width: 100px;
    height: 100px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer; /* 改变鼠标样式 */
    transition: all 0.5s;
}
/* 当菜单打开时 */
.menu.active .toggle{
    background-color: #222;
    color: white;
    transform: rotateZ(315deg);
    /* 白色圆盘的宽度 */
    box-shadow: 0 0 0 70px white;
}
/* 设置4个图标 */
.menu li{
    list-style: none;
    position: absolute; /* 子绝父相 */
    cursor: pointer;
    opacity: 0; /* 这个人在原地隐形了 */
    visibility: hidden; /* 这个人隐形但是他走了后保留他的位置 */
    transition: all 0.5s;
    z-index: 10;
}
.menu li:nth-of-type(1){transform: translateY(-75px);} 
.menu li:nth-of-type(2){transform: translateX(75px);}
.menu li:nth-of-type(3){transform: translateY(75px);}
.menu li:nth-of-type(4){transform: translateX(-75px);} 
/* 当菜单打开 让图标显示 */
.menu.active li{
    opacity: 1;
    visibility: visible;
}
/* 当li被点击时，会增加active类，并向前移动 */
li.active:nth-of-type(1){transform: translateY(-120px);}
li.active:nth-of-type(2){transform: translateX(120px);}
li.active:nth-of-type(3){transform: translateY(120px);}
li.active:nth-of-type(4){transform: translateX(-120px);}
/* 被选中的绿圈 */
.menu .selected{
    width: 70px;
    height: 70px;
    background-color: lawngreen;
    position: absolute;
    top: -15px;
    opacity: 0;
    transition: all 0.5s;
    border-radius: 50%;
    border: 10px solid #222;
}
.menu.active .selected{
    opacity: 1;
}
li.active:nth-of-type(2)~.selected{
    transform: rotateZ(90deg);
    transform-origin: 50% 165px;
}
li.active:nth-of-type(3)~.selected{
    transform: rotateZ(180deg);
    transform-origin: 50% 165px;
}
li.active:nth-of-type(4)~.selected{
    transform: rotateZ(270deg);
    transform-origin: 50% 165px;
}

var jiahao = document.querySelector('.toggle') //加号
var caidan = document.querySelector('.menu') // 整个菜单
// 点击加号触发事件
jiahao.onclick=function(){
    //如果没有active，增加active，如果有了就删除active
    caidan.classList.toggle('active')
} 

// 找到4个图标的 li
var list = document.querySelectorAll('li')

function activeli(){
    // 当点中某一个图标时，让列表里的图标删除自己的active,
    // 让触发这个函数的人增加active
    list.forEach(function(x){x.classList.remove('active')})
    this.classList.add('active')
}

// 给列表里的每一个元素增加功能
list.forEach(function(x){x.addEventListener('click',activeli)})

标签：menu,transform,li,nth,圆形,type,active,导航
From： https://www.cnblogs.com/duan-rui/p/17031340.html

相关文章

赞助商

阅读排行