কিভাবে স্থায়ী পার্শ্বিক বার্ট তৈরি করা
কিভাবে 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;} }
相关页面
教程:如何创建侧导航栏