如何创建：响应式顶部导航栏

学习如何使用 CSS 和 JavaScript 创建响应式顶部导航栏。

创建响应式顶部导航菜单

第一步 - 添加 HTML：

<!-- 加载图标库以在小屏幕上显示汉堡菜单（横杠） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

class="icon" 的链接用于在小屏幕上打开和关闭顶部导航。

第二步 - 添加 CSS：

/* 为顶部导航添加黑色背景色 */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* 设置导航栏中链接的样式 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
/* Verander de kleur van de link bij mouseover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Voeg een actieve klasse toe om de huidige pagina te markeren */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
/* Verberg de link die wordt gebruikt om de topnav op kleine schermen open en dicht te schakelen */
.topnav .icon {
  display: none;
}

Voeg media query toe:

/* Bij een schermbreedte kleiner dan 600 pixels, worden alle links (behalve de eerste, "Home") verborgen. Toon de link die de opening en sluiting van de topnav (.icon) mogelijk maakt */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* Wanneer de gebruiker op het pictogram klikt, voegt JavaScript de klasse "responsive" toe aan de topnav. Deze klasse maakt de topnav beter zichtbaar op kleine schermen (links weergegeven in plaats van horizontaal) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Derde stap - Voeg JavaScript toe:

/* Wanneer de gebruiker op het pictogram klikt, schakelt de topnav tussen het toevoegen en verwijderen van de klasse "responsive" */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

Try it yourself

Related pages

Tutorial:CSS navigation bar