CSS 响应式边栏导航实例

​x
 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
​
<ul class="sidenav">
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>
​
<div class="content">
  <h2>响应式边栏导航实例</h2>
  <p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。</p>
  <p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p>
  <h3>重置浏览器窗口大小，查看效果。</h3>
</div>
​
</body>
</html>

HTML

xxxxxxxxxx
 
body {margin: 0;}
​
ul.sidenav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}
​
ul.sidenav li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
ul.sidenav li a.active {
    background-color: #4CAF50;
    color: white;
}
​
ul.sidenav li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
​
div.content {
    margin-left: 25%;
    padding: 1px 16px;
    height: 1000px;
}
​
@media screen and (max-width: 900px) {
    ul.sidenav {
        width: 100%;
        height: auto;
        position: relative;
    }
    ul.sidenav li a {
        float: left;
        padding: 15px;
    }
    div.content {margin-left: 0;}
}
​
@media screen and (max-width: 400px) {
    ul.sidenav li a {
        text-align: center;
        float: none;
    }
}

CSS