ਕਿਵੇਂ ਬਣਾਓ: ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ "More" ਬਟਨ

ਵਿਛੱਡਣ ਵਾਲੀ "More" ਬਟਨ ਕਿਵੇਂ ਬਣਾਓ

ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਵਾਲੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਓ

ਯੂਜ਼ਰ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਦਿਸਾਣ ਵਾਲੇ ਐਲੀਮੈਂਟ 'ਤੇ ਮਾਊਸ ਲਗਾਉਣ 'ਤੇ ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਦਿਖਾਈ ਦੇਵੇਗੀ。

ਕਦਮ 1 - ਐੱਚਟੀਐੱਮਐੱਲ ਜੋੜੋ:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <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>
</div>

ਉਦਾਹਰਣ ਵਿਸਥਾਰਿਤ ਹੈ:

ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ਦੀ ਮਦਦ ਨਾਲ ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਖੋਲ੍ਹੋ ਜਿਵੇਂ <button>、<a> ਜਾਂ <p> ਐਲੀਮੈਂਟ。

ਕੰਟੇਨਰ ਐਲੀਮੈਂਟ (ਜਿਵੇਂ <div>) ਦੀ ਮਦਦ ਨਾਲ ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਬਣਾਓ ਅਤੇ ਉਸ ਵਿੱਚ ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਲਿੰਕ ਜੋੜੋ。

ਬਟਨ ਅਤੇ ਹੋਰ <div> ਐਲੀਮੈਂਟ ਨੂੰ <div> ਐਲੀਮੈਂਟ ਵਿੱਚ ਬੁਲੰਦ ਕਰ ਕੇ ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਨੂੰ ਸਹੀ ਤਰੀਕੇ ਨਾਲ ਸਥਾਨਿਤ ਕਰੋ。

ਕਦਮ 2 - ਸੀਐੱਸਐੱਸ ਜੋੜੋ:

/* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਕੰਟੇਨਰ */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਦਿਸਾਣ ਵਾਲੇ ਲਿੰਕ */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਕੰਟੇਨਰ */
.dropdown {
  float: left;
  overflow: hidden;
}
/* ਵਿਛੱਡਣ ਵਾਲੀ ਮੇਨੂ ਬਟਨ */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* ਮੋਬਾਈਲ 'ਤੇ ਵਰਤੀਕਾਰੀ ਪਾਠ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ */
  margin: 0; /* ਮੋਬਾਈਲ ਉੱਪਰ ਲੰਬੀ ਪੰਨੇ ਵਿੱਚ ਖਾਸ ਤੌਰ 'ਤੇ ਅਹਿਮ */
}
/* ਮਾਉਸ ਹੋਵੇਂ ਤਾਂ ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ ਦੇ ਰੈੱਡ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਦਿਖਾਓ */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਦੇ ਸਮੱਗਰੀ (ਮੂਲਤਬੀ ਛੁਪਾਇਆ ਹੈ) */
.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;
}
/* ਮਾਉਸ ਹੋਵੇਂ ਤਾਂ ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਲਿੰਕ ਦੇ ਗ੍ਰੇ ਬੈਕਗਰਾਊਂਡ ਕਲਰ ਦਿਖਾਓ */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* ਮਾਉਸ ਹੋਵੇਂ ਤਾਂ ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਦਿਖਾਓ */
.dropdown:hover .dropdown-content {
  display: block;
}

ਆਪਣੇ ਆਪ ਨਾਲ ਚੇਸ਼ਤ ਕਰੋ

ਉਦਾਹਰਣ ਵਿਸਥਾਰਿਤ ਹੈ:

ਅਸੀਂ ਨੇਵੀਗੇਸ਼ਨ ਅਤੇ ਨੇਵੀਗੇਸ਼ਨ ਲਿੰਕ ਲਈ ਬੈਕਗਰਾਊਂਡ ਕਲਰ, ਪੈਡਿੰਗ ਆਦਿ ਵਰਗ ਦੇ ਸਟਾਈਲ ਸੈੱਟ ਕੀਤੇ ਹਨ。

ਅਸੀਂ ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਬਟਨ ਲਈ ਬੈਕਗਰਾਊਂਡ ਕਲਰ, ਪੈਡਿੰਗ ਆਦਿ ਵਰਗ ਦੇ ਸਟਾਈਲ ਸੈੱਟ ਕੀਤੇ ਹਨ。

.dropdown ਵਰਗ ਹੈ .dropdown-content ਦੇ ਕੰਟੇਨਰ। ਇਹ ਇੱਕ <div> ਏਜੈਂਟ ਹੈ, ਨਹੀਂ ਕਿ <a> ਏਜੈਂਟ, ਇਸ ਲਈ ਇਸਨੂੰ ਫਲੌਟ ਕਰਨਾ ਹੈ ਤਾਂ ਕਿ ਇਹ ਲਿੰਕ ਦੇ ਨਾਲ ਰਹੇ ਰਹੇ।

.dropdown-content ਵਰਗ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ ਜੋ ਅਸਲ ਦਾ ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਰੱਖਦਾ ਹੈ। ਇਹ ਮੂਲਤਬੀ ਸਕਰੀਨ ਵਿੱਚ ਛੁਪਾਇਆ ਹੈ, ਅਤੇ ਮਾਉਸ ਦੇ ਉੱਪਰ ਲਿਆਉਣ 'ਤੇ ਦਿਖਾਇਆ ਜਾਵੇਗਾ (ਹੇਠਾਂ ਦੇਖੋ)। ਧਿਆਨ ਦੇਂ, ਨਾਲਾਂ ਦੀ ਨਾਲਕੀ ਸੈੱਟ ਕੀਤੀ ਗਈ 160px ਹੈ। ਇਸ ਸੈੱਟਿੰਗ ਨੂੰ ਕਿਸੇ ਨਾ ਕਿਸੇ ਤਰ੍ਹਾਂ ਤੋਂ ਬਦਲ ਸਕਦੇ ਹੋ ਸਨ।

ਬੋਰਡਰ ਦੀ ਵਰਤੋਂ ਨਹੀਂ ਕੀਤੀ ਹੈ ਬਲਕਿ box-shadow ਲੋੜੀਂਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ ਤਾਂ ਕਿ ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਇੱਕ 'ਕਾਰਡ' ਵਾਂਗ ਦਿਖਾਇਆ ਜਾ ਸਕੇ। ਅਸੀਂ ਵੀ z-index ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਹੋਰ ਏਜੈਂਟਾਂ ਦੇ ਸਾਹਮਣੇ ਰੱਖੋ。

:hover ਚੋਣਕਾਰ ਮੌਜੂਦਾ ਸਥਿਤੀ ਵਿੱਚ ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਦਿਖਾਉਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।

ਸਬੰਧਤ ਪੰਨੇ

ਸਿੱਖਿਆ:CSS 下拉菜单

ਸਿੱਖਿਆ:ਕਿਵੇਂ ਕਲਿੱਕੇਬਲ ਡਰਾਪਡਾਉਨ ਮੇਨੂ ਬਣਾਓ

ਸਿੱਖਿਆ:CSS 导航栏

ਸਿੱਖਿਆ:ਰੈਸਪਾਂਸਿਵ ਟੋਪ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਕਿਵੇਂ ਬਣਾਓ