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

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

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

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

    
    
    
    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;
        }
    }




    
        主页
        新闻
        联系
        关于
    

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

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

    


    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;}
    }





  主页
  新闻
  联系
  关于



  响应式导航栏实例
  在屏幕宽度小于 600px 会重置导航栏。
  重置浏览器窗口大小，查看效果。

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

    下拉菜单实例|菜鸟教程(runoob.com)
    
    
    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;
    }





    
        主页
        新闻
        
            下拉菜单
            
                链接 1
                链接 2
                链接 3
            
        
    

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