<ul class="topnav">

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

  <li class="icon">

    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>

  </li>

</ul>

​

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

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

  <p>可通过重置浏览器大小查看效果</p>

</div>

function myFunction() {

    document.getElementsByClassName("topnav")[0].classList.toggle("responsive");

}

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: inline-block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  transition: 0.3s;

  font-size: 17px;

}

​

ul.topnav li a:hover {background-color: #111;}

​

ul.topnav li.icon {display: none;}

​

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

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

  ul.topnav li.icon {

    float: right;

    display: inline-block;

  }

}

​

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

  ul.topnav.responsive {position: relative;}

  ul.topnav.responsive li.icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  ul.topnav.responsive li {

    float: none;

    display: inline;

  }

  ul.topnav.responsive li a {

    display: block;

    text-align: left;

  }

}