ਕਿਵੇਂ ਬਣਾਓ: ਗੋਲਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਨਾਲ ਜੁੜੇ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ

ਗੋਲਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਨਾਲ ਜੁੜੇ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਕਿਵੇਂ ਬਣਾਓ

ਗੋਲਬਾਰ ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਨਾਲ ਜੁੜੇ ਲਿੰਕ

ਪਹਿਲਾ ਕਦਮ - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a>
</div>

第二步 - 添加 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;
}
/* 添加一个活动类来突出显示当前页面 */
.active {
  background-color: #04AA6D;
  color: white;
}
/* 在小屏幕上隐藏应打开和关闭顶部导航的链接 */
.topnav .icon {
  display: none;
}
/* 下拉菜单容器 - 用于定位下拉菜单内容 */
.dropdown {
  float: left;
  overflow: hidden;
}
/* 设置下拉菜单按钮的样式以使其适应顶部导航栏 */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}
/* 设置下拉菜单内容的样式（默认为隐藏） */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* 设置下拉菜单内的链接样式 */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* 在鼠标悬停时，为顶部导航栏链接和下拉菜单按钮添加深色背景 */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}
/* 在鼠标悬停时，为下拉菜单链接添加灰色背景 */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}
/* ਜਦੋਂ ਯੂਜ਼ਰ ਮਾਉਸ ਨੂੰ ਡਰਾਪਡ ਮੈਨੂ ਬਟਨ ਉੱਤੇ ਲਗਾਏ ਤਾਂ ਡਰਾਪਡ ਮੈਨੂ ਦਿਖਾਓ */
.dropdown:hover .dropdown-content {
  display: block;
}
/* ਜਦੋਂ ਸਕਰੀਨ ਚੌਕੇ ਵਿੱਚ 600 ਪਾਇਕਸਲ ਤੋਂ ਘੱਟ ਹੋਵੇ ਤਾਂ ਪਹਿਲਾ ਲਿੰਕ ("ਹੋਮ") ਤੋਂ ਬਾਕੀ ਸਾਰੇ ਲਿੰਕਾਂ ਨੂੰ ਛੁਪਾਓ। ਇਹ ਲਿੰਕ ਉੱਚ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਖੋਲ੍ਹਣ ਅਤੇ ਬੰਦ ਕਰਨ (ਉੱਚ .icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* ਜਦੋਂ ਯੂਜ਼ਰ ਚਿੱਤਰ ਨੂੰ ਕਿਕ ਕਰੇ ਤਾਂ ਜਾਵਾਸਕ੍ਰਿਪਟ ਉੱਚ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ "responsive" ਕਲਾਸ ਜੋੜੇਗਾ। ਇਹ ਕਲਾਸ ਉੱਚ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਨੂੰ ਛੋਟੇ ਸਕਰੀਨਾਂ ਉੱਤੇ ਬਿਹਤਰ ਦਿਖਾਉਂਦਾ ਹੈ (ਸਿਰਫ਼ ਉੱਚ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਲਿੰਕ ਨਹੀਂ ਪਹਿਲਾ ਲਿੰਕ ਪਹਿਲਾਂ ਦਿਖਾਈ ਦੇਣ ਵਾਲੇ ਲਿੰਕ) */
@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 .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

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

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

ਆਪਣੇ ਹੀ ਅਚਰਨ ਕਰੋ

ਸਬੰਧਤ ਪੇਜਸ

ਟੂਰੀਅਲਰਸ਼ਿਪ:CSS 下拉菜单

ਟੂਰੀਅਲਰਸ਼ਿਪ:ਕਿਵੇਂ ਕਿਕ ਕਰਨ ਵਾਲੇ ਡਰਾਪਡ ਮੈਨੂ ਬਣਾਓ

ਟੂਰੀਅਲਰਸ਼ਿਪ:CSS 导航栏

ਟੂਰੀਅਲਰਸ਼ਿਪ:ਕਿਵੇਂ ਸਾਈਡ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਓ