ਕਿਵੇਂ ਬਣਾਓ: ਸਾਮਨੇ ਸੂਚੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਸਾਮਨੇ ਸੂਚੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਉਣ ਲਈ ਸਿੱਖੋ

ਸਾਮਨੇ ਸੂਚੀ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਬਣਾਓ

ਜਦੋਂ ਯੂਜ਼ਰ ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਉਪਾਂਤ 'ਤੇ ਮਾਉਸ ਨੂੰ ਲਿਆਉਂਦਾ ਹੈ ਤਾਂ ਇੱਕ ਸਾਮਨੇ ਸੂਚੀ ਦਿਖਾਈ ਦੇਵੇਗੀ。

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

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

ਉਦਾਹਰਣ ਸਮਝਾਓ:

ਕਿਸੇ ਵੀ ਉਪਾਂਤ ਨੂੰ ਵਰਤਕੇ ਸਾਮਨੇ ਸੂਚੀ ਖੋਲ੍ਹੋ, ਉਦਾਹਰਣ ਵਜੋਂ <button>, <a> ਜਾਂ <p> ਉਪਾਂਤ。

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

ਬਟਨ ਅਤੇ ਹੋਰ <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 导航栏

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