چگونه بنائیں: سائیڈ نویگیشن بٹن

چگونه قابل چرخانہ سائیڈ نویگیشن بنائیں

پہلی قدم - ایچ تی ایم ایل اضافہ کریں:

<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