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

学习如何使用 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;
}
/* ਮਾਉਸ ਨੂੰ ਲਿੰਕ 'ਤੇ ਲੈਣ ਨਾਲ ਲਿੰਕ ਦੀ ਰੰਗ ਬਦਲਣਾ */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
/* ਇੱਕ ਗਤੀਸ਼ੀਲ ਵਰਗ ਜੋੜਨ ਲਈ ਕੰਮ ਕਰੋ ਤਾਂ ਕਿ ਮੌਜੂਦਾ ਪੰਨੇ ਨੂੰ ਉਭਾਰਨਾ */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}
/* ਛੋਟੇ ਸਕਰੀਨ 'ਤੇ ਉੱਚ ਨੂੰ ਖੋਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ ਦੇ ਲਈ ਵਰਗ ਦੇ ਲਿੰਕਸ ਨੂੰ ਛੁਪਾਓ */
.topnav .icon {
  display: none;
}

ਮੀਡੀਆ ਕਿਊਰੀ ਜੋੜੋ:

/* ਜਦੋਂ ਸਕਰੀਨ ਚੌਕਸਾਰ ਕਿਸੇ 600 ਪਿਕਸਲ ਤੋਂ ਘੱਟ ਹੋਵੇ ਤਾਂ ਪਹਿਲਾ ਲਿੰਕ ("Home") ਤੋਂ ਹੋਰ ਸਾਰੇ ਲਿੰਕਸ ਛੁਪਾਓ। ਉਹ ਲਿੰਕਸ ਦਿਖਾਓ ਜੋ ਉੱਚ ਨੂੰ ਖੋਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ (.icon) ਦੇ ਲਈ ਹਨ */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* ਜਦੋਂ ਯੂਜ਼ਰ ਆਈਕਾਨ ਨੂੰ ਕਲਿੱਕ ਕਰੇ ਤਾਂ JavaScript ਨਾਲ topnav 'ਤੇ responsive ਵਰਗ ਜੋੜਿਆ ਜਾਵੇ। ਇਹ ਵਰਗ topnav ਨੂੰ ਛੋਟੇ ਸਕਰੀਨ 'ਤੇ ਬਿਹਤਰ ਦਿਖਾਉਂਦਾ ਹੈ (ਲਿੰਕਸ ਪਰਿਪੰਨ ਵੱਜੋਂ ਦਿਖਾਉਣ ਦੀ ਬਜਾਏ ਖੱਡੀ ਵੱਜੋਂ ਦਿਖਾਉਣ) */
@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;
  }
}

ਤੀਜਾ ਪਗਲਾ - ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋੜੋ:

/* ਜਦੋਂ ਯੂਜ਼ਰ ਆਈਕਾਨ ਨੂੰ ਕਲਿੱਕ ਕਰੇ ਤਾਂ topnav 'ਤੇ responsive ਵਰਗ ਜੋੜਨ ਜਾਂ ਹਟਾਉਣ */
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  }
    x.className = "topnav";
  }
}

亲自试一试

相关页面

教程：CSS 导航栏