CSS 响应式导航条

响应式顶部导航条

如何使用 CSS 样式来创建响应性的顶部导航。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
        }
        ul.topnav {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        ul.topnav li {
            float: left;
        }
        ul.topnav li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        ul.topnav li a:hover:not(.active) {
            background-color: #111;
        }
        ul.topnav li a.active {
            background-color: #04AA6D;
        }
        ul.topnav li.right {
            float: right;
        }
        @media screen and (max-width: 600px) {
            ul.topnav li.right,
            ul.topnav li {
                float: none;
            }
        }
    </style>
</head>
<body>
    <ul class="topnav">
        <li><a class="active" href="#home">首页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系方式</a></li>
        <li class="right"><a href="#about">关于我们</a></li>
    </ul>
    <div style="padding:0 16px;">
        <h2>响应Topnav示例</h2>
        <p>此示例使用媒体查询在屏幕大小为600px或更小时的导航条</p>
        <p>在我们的CSS教程中，您将进一步了解 CSS media 和响应式 web 设计</p>
        <h4>调整浏览器窗口的大小以查看效果。也可以分别在电脑端和手机端查看不同的展示效果。</h4>
    </div>
</body>
</html>

运行一下

响应式侧边导航条

如何使用 CSS 样式来创建响应侧导航。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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: 800px;
        }
        @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>
<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时，此示例使用 CSS media queries 方式将 侧边栏导航条转换为顶部导航条</p>
        <p>我们还添加了一个400像素或更小屏幕的媒体查询，它将垂直堆叠导航链接并将其居中</p>
        <p>在我们的CSS教程中，您将进一步了解 CSS media queries 方式 和响应式web设计</p>
        <h3>调整浏览器窗口的大小以查看效果</h3>
    </div>
</body>
</html>

运行一下

CSS 响应式导航条

响应式顶部导航条

响应式侧边导航条

分类导航