css 响应式边栏导航实例 - 自学教程(runoops.com)

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 响应式边栏导航 实例 - 自学教程(runoops.com)</title>
    <style>
        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;
            }
        }
    </style>
</head>

<div class="content">
        <h2>响应式边栏导航实例</h2>
        <p>该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。</p>
        <p>如果屏幕宽度小于 400px 会变为垂直导航栏。</p>
        <h3>重置浏览器窗口大小，查看效果。</h3>
    </div>

</body>

</html>