<div class="topnav" id="myTopnav">

  <a href="#home">主页</a>

  <a href="#news">新闻</a>

  <a href="#contact">联系方式</a>

  <a href="#about">关于我们</a>

  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>

</div>

<div style="padding-left:16px">

  <h2>响应式顶部导航实例</h2>

  <p>重置浏览器查看实例。</p>

</div>

function myFunction() {

    var x = document.getElementById("myTopnav");

    if (x.className === "topnav") {

        x.className += " responsive";

    } else {

        x.className = "topnav";

    }

}

body {margin:0;}

​

.topnav {

  overflow: hidden;

  background-color: #333;

}

​

.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

​

.topnav a:hover {

  background-color: #ddd;

  color: black;

}

​

.topnav .icon {

  display: none;

}

​

@media screen and (max-width: 600px) {

  .topnav a:not(:first-child) {display: none;}

  .topnav a.icon {

    float: right;

    display: block;

  }

}

​

@media screen and (max-width: 600px) {

  .topnav.responsive {position: relative;}

  .topnav.responsive .icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: left;

  }

​

}