ਕਿਵੇਂ ਬਣਾਉਣ: ਫਿਕਸਡ ਮੇਨੂ

ਫਿਕਸਡ ਹੈਦਨ ਮੇਨੂ ਬਣਾਉਣ ਦੀ ਤਰ੍ਹਾਂ

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

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>
<div class="main">
  <p>Some text some text some text some text..</p>
</div>

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

ਫਿਕਸਡ ਹੈਦਨ ਮੇਨੂ ਬਣਾਉਣ ਲਈ ਵਰਤੋ position:fixed ਅਤੇ top:0ਧਿਆਨ ਦੇਓ! ਫਿਕਸਡ ਮੇਨੂ ਆਪਣੇ ਹੋਰ ਕੰਟੈਂਟ ਨੂੰ ਓਵਰਲੈਪ ਕਰ ਸਕਦਾ ਹੈ। ਇਹ ਸਮੱਸਿਆ ਹੱਲ ਕਰਨ ਲਈ ਮੇਨੂ ਦੀ ਚੌੜਾਈ ਵਾਲੀ ਉੱਚ ਹੈਦਨ ਪਾਉਣੀ ਚਾਹੀਦੀ ਹੈ (margin-top)。

/* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ */
.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed; /* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਨੂੰ ਫਿਕਸਡ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖੋ */
  top: 0; /* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਨੂੰ ਪੰਜੀਜ਼ ਪੇਜ਼ ਵਿੱਚ ਰੱਖੋ */
  width: 100%; /* ਪੂਰੀ ਚੌੜਾਈ */
}
/* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਲਿੰਕ */
.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ਮਾਉਸ ਹੋਵਰ ਹੋਣ ਉੱਤੇ ਬੈਕਗਰਾਊਂਡ ਬਦਲਦਾ */
.navbar a:hover {
  background: #ddd;
  color: black;
}
/* ਮੁੱਖ ਕੰਟੈਂਟ */
.main {
  margin-top: 30px; /* ਨਿਊਨ ਹੈਦਨ ਪਾਉਣ ਨਾਲ ਕੰਟੈਂਟ ਦੀ ਓਵਰਲੈਪ ਰੋਕੋ */
}

亲自试一试

ਫਿਕਸਡ ਹੈਦਨ ਮੇਨੂ ਬਣਾਉਣ ਦੀ ਤਰ੍ਹਾਂ

ਫਿਕਸਡ ਹੈਦਨ ਮੇਨੂ ਬਣਾਉਣ ਲਈ ਵਰਤੋ position:fixed ਅਤੇ bottom:0：

/* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ */
.navbar {
  position: fixed; /* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਨੂੰ ਫਿਕਸਡ ਸਥਿਤੀ ਵਿੱਚ ਰੱਖੋ */
  bottom: 0; /* ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਨੂੰ ਪੰਜੀਜ਼ ਪੇਜ਼ ਵਿੱਚ ਰੱਖੋ */
  width: 100%; /* ਪੂਰੀ ਚੌੜਾਈ */
}
/* ਮੁੱਖ ਕੰਟੈਂਟ */
.main {
  margin-bottom: 30px; /* ਨਿਊਨ ਹੈਦਨ ਪਾਉਣ ਨਾਲ ਕੰਟੈਂਟ ਦੀ ਓਵਰਲੈਪ ਰੋਕੋ */
}

亲自试一试

相关页面

教程：CSS 导航栏