<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css选择切换菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
.container{
display: flex;
height: 100%;
}
.main{
display: flex;
flex-direction: column;
margin: auto;
width: 300px;
height: 500px;
overflow: hidden;
border-radius: 10px;
}
.main input:nth-child(1):checked ~ div label:nth-child(1),.main input:nth-child(2):checked ~ div label:nth-child(2),
.main input:nth-child(3):checked ~ div label:nth-child(3),.main input:nth-child(4):checked ~ div label:nth-child(4){
background-color: #3c9;
color: #fff;
}
.main input:nth-child(1):checked ~ ul{
transform: translate(0,0);
}
.main input:nth-child(2):checked ~ ul{
transform: translateX(-25%);
}
.main input:nth-child(3):checked ~ ul{
transform: translate(-50%,0);
}
.main input:nth-child(4):checked ~ ul{
transform: translate(-75%,0);
}
.nav{
display: flex;
}
.nav label{
flex: 1;
height: 40px;
background-color: #ccc;
line-height: 40px;
text-align: center;
}
.view{
display: flex;
flex-wrap: nowrap;
width: 400%;
height: 100%;
transition: transform 0.3s;
}
.view li{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<input id="nav1" type="radio" name="nav" hidden checked>
<input id="nav2" type="radio" name="nav" hidden>
<input id="nav3" type="radio" name="nav" hidden>
<input id="nav4" type="radio" name="nav" hidden>
<div class="nav">
<label for="nav1">菜单一</label>
<label for="nav2">菜单二</label>
<label for="nav3">菜单三</label>
<label for="nav4">菜单四</label>
</div>
<ul class="view">
<li style="background-color: aqua;">内容一</li>
<li style="background-color: cornflowerblue;">内容二</li>
<li style="background-color: coral;">内容三</li>
<li style="background-color: chartreuse;">内容四</li>
</ul>
</div>
</div>
</body>
</html>
css选择菜单
最新推荐文章于 2021-08-03 22:57:50 发布