我已经制作了一个包含6个元素的简单侧边导航菜单。以下是我的要求示例:
我希望我已经讲得很清楚了。谢谢!
- 我点击第一个元素,菜单从2vh增长到4vh,并改变颜色(过渡效果)。
- 然后我点击第二个元素,第二个元素会增长,而第一个元素则会缩小(恢复原始样式)。
- 如果我再次点击第二个元素,我希望它也能恢复到正常样式。其他元素也是如此。
function scale() {
const element = document.getElementById('nav1');
element.classList.add('navmenu-clicked');
}
.navmenu {
color: #213362;
font-size: 2vh;
position: fixed;
left: 2%;
text-decoration: none;
cursor: default;
font-family: Arial, Helvetica, sans-serif;
transition: all 2s;
}
.navmenu-clicked {
color: red;
font-size: 4vh;
}
#nav1 {
top: 30%;
}
#nav2 {
top: 40%;
}
#nav3 {
top: 50%;
}
#nav4 {
top: 60%;
}
#nav5 {
top: 70%;
}
#nav6 {
top: 80%;
}
.panel1,
.panel2 {
height: 100vh;
}
.panel1 {
background-color: red;
}
.panel2 {
background-color: blue;
}
<a class="navmenu" id="nav1" href="#" onclick="scale()">menu1</a>
<a class="navmenu" id="nav2" href="#" onclick="scale()">menu2</a>
<a class="navmenu" id="nav3" href="#" onclick="scale()">menu3</a>
<a class="navmenu" id="nav4" href="#" onclick="scale()">menu4</a>
<a class="navmenu" id="nav5" href="#" onclick="scale()">menu5</a>
<a class="navmenu" id="nav6" href="#" onclick="scale()">menu6</a>