কিভাবে স্থায়ী পার্শ্বিক বার্ট তৈরি করা

কিভাবে CSS ব্যবহার করে স্থায়ী পার্শ্বিক নেভিগেশন মেনু তৈরি করবেন

সম্পূর্ণ উচ্চতা:

স্বয়ং প্রয়োগ করুন

স্বচ্ছ উচ্চতা:

স্বয়ং প্রয়োগ করুন

স্থায়ী সাইডবার তৈরি করুন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<!-- সাইড নেভিগেশন -->
<div class="sidenav">
  <a href="#">বিষয়</a>
  <a href="#">সেবা</a>
  <a href="#">ক্লায়েন্ট</a>
  <a href="#">যোগাযোগ</a>
</div>
<!-- পাতার বিষয় সামগ্রী -->
<div class="main">
  ...
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

/* সাইডবার মেনু */
.sidenav {
  height: 100%; /* সম্পূর্ণ উচ্চতা: আপনার যদি 'স্বচ্ছ' উচ্চতা চান, তাহলে এই সেটিং মুক্ত করুন */
  width: 160px; /* সাইডবারের প্রস্থ */
  position: fixed; /* সাইডবারকে স্থায়ীভাবে সম্পাদনা (সর্বদা সর্বস্থানে স্থানান্তরিত) */
  z-index: 1; /* সর্বদা শীর্ষে থাকুন */
  top: 0; /* সর্বদা শীর্ষে থাকুন */
  left: 0;
  background-color: #111; /* কালো */
  overflow-x: hidden; /* হলবগা লোকেশনকে নিষিদ্ধ */
  padding-top: 20px;
}
/* নেভিগেশন মেনু লিঙ্ক */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}
/* নেভিগেশন লিঙ্ক এর উপর মাউস রাখার সময় আপনার রঙ পরিবর্তন */
.sidenav a:hover {
  color: #f1f1f1;
}
/* পাতার বিষয় শৈলী সমাবেশ */
.main {
  margin-left: 160px; /* সাইডবারের প্রস্থ সমান */
  padding: 0px 10px;
}
/* 450 পিক্সেলের কম উচ্চতায় হাইপারসম্পাদক সাইডবারের শৈলী পরিবর্তন (কম অভ্যন্তরীণ স্পেসিং এবং ছোট ফন্ট সাইজ) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

相关页面

教程:সিএসএস নেভিগেশন

教程:如何创建侧导航栏