如何用CSS构建响应式顶部导航栏

想建个漂亮的导航栏，查了一下，那些用工具导来导去的都比较占流量，决定只用CSS构建，发现runoob上有三个完整的实例，我整理了一下，写在一处，代码输入即用，方便大家查询。
原地址链接在（http://www.runoob.com/css/css-navbar.html）的底部。

（一）响应式顶部导航：如何使用 CSS3 媒体查询来创建一个响应式导航。
该实例在屏幕宽度小于 900px 时导航栏为顶部水平导航栏，如果大于 900px 导航栏会在左边，且是固定的。
如果屏幕宽度小于 400px 会变为垂直导航栏。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
    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>
<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>

（二）响应式边栏导航：如何使用 CSS3 媒体查询来创建一个边栏导航。
这个600px的边栏导航栏在宽度变窄的时候，会自动变成竖直的长条排在顶部。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
    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: #4CAF50;}

    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>响应式导航栏实例</h2>
  <p>在屏幕宽度小于 600px 会重置导航栏。</p>
  <h4>重置浏览器窗口大小，查看效果。</h4>
</div>

</body>
</html>

（三）导航下拉菜单：在导航条内部设置下拉菜单
鼠标移动到 “下拉菜单” 链接先显示下拉菜单。

<!DOCTYPE html>
<html>
<head>
    <title>下拉菜单实例|菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <style>
    ul{
        list-style-type:none;
        margin:0;
        padding:0;
        overflow:hidden;
        background-color:#333;
    }

    li{
        float:left;
    }

    li a, .dropbtn
    {
        display:inline-block;
        color:white;
        text-align:center;
        padding:14px 16px;
        text-decoration:none;
    }

    li a:hover, .dropdown:hover .bropbtn
    {
        background-color:#111;
    }

    .dropdown
    {
        display:inline-block;
    }

    .dropdown-content
    {
        display:none;
        position:absolute;
        background-color:#f9f9f9;
        min-width:160px;
        box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    }

    .dropdown-content a
    {
        color:black;
        padding:12px 16px;
        text-decoration:none;
        display:block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .dropdown:hover .dropdown-content
    {
        display:block;
    }

</style>
</head>
<body>

    <ul>
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <div class="dropdown">
            <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content">
                <a href="#">链接 1</a>
                <a href="#">链接 2</a>
                <a href="#">链接 3</a>
            </div>
        </div>
    </ul>

    <h3>导航栏上的下拉菜单</h3>
    <p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

</body>
</html>

如何用CSS构建响应式顶部导航栏

如何用CSS构建响应式顶部导航栏

猜你喜欢