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

学习如何使用 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;
}
/* Palitan ang kulay ng link kapag may mouse hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* Magdagdag ng isang aktibong klase upang pagbibigay diin sa kasalukuyang pahina */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
/* Itago ang link na ginagamit para buksan at saraan ang itaas na navigation sa maliit na screen */
.topnav .icon {
  display: none;
}

Magdagdag ng media query:

/* Kapag ang lapad ng screen ay mas maliit sa 600 pixel, itago ang lahat ng link maliban sa unang link ("Home") at ipakita ang link na naglalagay ng pagbubukas at pagsasara ng itaas na navigation (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* Kapag tinatangka ng user ang icon, magdagdag ang JavaScript ng klase "responsive" sa topnav. Ang klase na ito ay gumagawa ng topnav na mas mabuti sa maliit na screen (magpapakita ng link na patayo kaysa sa patag sa horizontal na display) */
@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;
  }
}

Ika-tatlong hakbang - Magdagdag ng JavaScript:

/* Kapag tinatangka ng user ang icon, palitan ang pagdagdag at pag-alis ng klase "responsive" sa topnav */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  }
    x.className = "topnav";
  }
}

亲自试一试

相关页面

教程：CSS 导航栏