实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body{
margin:0;
}
ul{
list-style-type:none;
padding:0;
margin:0;
background-color:#333;
width:10%;
height:100%;
overflow:auto;
position:fixed;
}
li a{
padding:8px 16px;
display:block;
color:white;
text-decoration:none;
}
a.home{
background-color:#4CAF50;
}
li a:hover:not(.home){
background-color:black;
}
@media screen and (max-width:600px){
li,li.about{
float:none;
}
}
div{
float:left;
margin-left:10%;
padding:10px 16px;
height:1000px;
}
@media screen and (max-width:900px){
ul{
width:100%;
height:auto;
position:relative;
}
ul.li a {
float:left;
padding:15px;
}
div{
margin-left:0;
}
@media screen and (max-width:400px){
ul.li a {
text-align:center;
float:none;
}
}
}
</style>
</head>
<body>
<ul>
<li><a class="home" href="https://www.dwoke.com">Home</a></li>
<li><a href="https://www.dwoke.com">News</a></li>
<li><a href="https://www.dwoke.com">Contact</a></li>
<li class="about"><a href="https://www.dwoke.com">About</a></li>
</ul>
<div>
<h1>响应式侧导航栏实例</h1>
<p>当屏幕尺寸为900像素或更小时，此例使用媒体查询将Sidenav转换为顶部导航栏。</p>
<p>我们还为屏幕小于等于400像素的屏幕添加了媒体查询，它将垂直堆叠并居中放置导航链接。</p>
</div>
</body>
</html>
运行效果：
评论