ਕਿਵੇਂ ਬਣਾਓ: ਸਾਈਡਨੇਵ ਬਟਨ

ਹੋਵੇਂਗੇ ਮਹਿਲਾ ਸਾਈਡਨੇਵ ਬਣਾਉਣ ਦਾ ਤਰੀਕਾ

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

<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Blog</a>
  <a href="#" id="projects">Projects</a>
  <a href="#" id="contact">Contact</a>
</div>

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

/* ਸਾਈਡਨੇਵ ਅੰਦਰ ਲਿੰਕ ਦੇ ਸਟਾਈਲ ਨੂੰ ਸੈਟ ਕਰੋ */
#mySidenav a {
  position: absolute; /* ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਨਾਲ ਸਬੰਧਤ ਰੂਪ ਵਿੱਚ ਉਨ੍ਹਾਂ ਨੂੰ ਸਥਾਨਿਤ ਕਰੋ */
  left: -80px; /* ਉਨ੍ਹਾਂ ਨੂੰ ਸਕਰੀਨ ਬਾਹਰ ਸਥਾਨਿਤ ਕਰੋ */
  transition: 0.3s; /* ਮਾਉਸ ਲੜੇ ਹੋਏ ਮੌਕੇ ਲਈ ਟ੍ਰਾਂਜ਼ੀਸ਼ਨ ਜੋੜੋ */
  padding: 15px; /* 15px ਅੰਦਰੂਨੀ ਪੈਡਿੰਗ */
  width: 100px; /* ਵਿਸ਼ੇਸ਼ ਚੌਡਾਈ ਸੈਟ ਕੀਤੀ ਜਾਵੇ */
  text-decoration: none; /* ਨੀਂਹਾਂ ਹਟਾਓ */
  font-size: 20px; /* ਫੋਂਟ ਸਾਈਜ਼ ਵਧਾਓ */
  color: white; /* ਲਿਖਤ ਰੰਗ ਨੂੰ ਸਫੇਦ ਸੈਟ ਕੀਤਾ */
  border-radius: 0 5px 5px 0; /* ਉੱਤਰੀ ਉੱਚੇ ਅਤੇ ਦੱਖਣੀ ਉੱਚੇ ਮੋਡਨੇ */
}
#mySidenav a:hover {
  left: 0; /* ਮਾਉਸ ਲੜੇ ਹੋਏ ਮੌਕੇ, ਤਾਕਿ ਇਲੈਕਟ੍ਰੌਨਿਕ ਅਣੂ ਉਸ ਦੇ ਸਹੀ ਢੰਗ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇ */
}
/* about ਲਿੰਕ: ਉੱਪਰਲੇ ਮੁੱਢੇ ਵਿੱਚ 20px, ਗ੍ਰੀਨ ਪਿੱਛਲਾ */
#about {
  top: 20px;
  background-color: #04AA6D;
}
#blog {
  top: 80px;
  background-color: #2196F3; /* ਨੀਲਾ */
}
#projects {
  top: 140px;
  background-color: #f44336; /* ਲਾਲਾ */
}
#contact {
  top: 200px;
  background-color: #555 /* ਸਫ਼ਟ ਕਾਲਾ */
}

亲自试一试

相关页面

教程：CSS 导航栏