点击菜单向（四周展开
2022-03-09 本文已影响0人
心存美好
点击菜单向（四周展开）
通过css样式中添加一个类名，在js中操作这个类名，如果在js中操作样式就很麻烦！
<style>
body {
font-family: "Microsoft YaHei", serif;
}
body,
dl,
dd,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
ol,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
img {
border: none;
}
#menu {
position: relative;
width: 180px;
height: 180px;
}
#menu .main {
position: absolute;
left: 45px;
top: 45px;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
border-radius: 50%;
background-color: pink;
cursor: pointer;
/*小手*/
transform: scale(1);
/*缩放*/
transition: 2s;
/* 过渡*/
}
#menu .main.hide {
transform: scale(0);
}
#menu .list p {
position: absolute;
width: 80px;
height: 80px;
background-color: skyblue;
border-radius: 50%;
line-height: 80px;
text-align: center;
cursor: pointer;
transform: scale(0);
/* 参数放大缩小的比例 现在缩到是最小 */
transition: 3s;
/* 过渡*/
}
#menu .list.show p {
transform: scale(1);
/*有了类名show，盒子就会放大一倍 */
}
#menu .list p:nth-child(1) {
top: 40px;
left: 40px;
}
#menu .list.show p:nth-child(1) {
top: 0;
left: 0;
}
#menu .list p:nth-child(2) {
top: 40px;
right: 40px;
}
#menu .list.show p:nth-child(2) {
top: 0;
right: 0;
}
#menu .list p:nth-child(3) {
bottom: 40px;
left: 40px;
}
#menu .list.show p:nth-child(3) {
bottom: 0;
left: 0;
}
#menu .list p:nth-child(4) {
bottom: 40px;
right: 40px;
}
#menu .list.show p:nth-child(4) {
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="menu">
<div class="main">菜单</div>
<div class="list">
<p>首页</p>
<p>产品</p>
<p>案例</p>
<p>联系</p>
</div>
</div>
<script>
// 1. 获取元素
let oMain = document.querySelector('#menu .main');
let oList = document.querySelector('#menu .list')
console.log(oMain);
// 2.绑定点击事件
oMain.onclick = function () {
this.classList.add('hide'); //新增类名。不能使用赋值了 this.className =''
oList.classList.add('show')
}
oList.onclick = function () {
this.classList.remove('show');
oMain.classList.remove('hide')
}
</script>
