কিভাবে তৈরি করা: রেসপন্সিভ সাইডবার
CSS দ্বারা রেসপন্সিভ সাইডবার নেভিগেশন মেনু তৈরি করা কিভাবে শিখুন。
রেসপন্সিভ সাইডবার নেভিগেশন তৈরি করুন
প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:
<!-- সাইডবার --> <div class="sidebar"> <a class="active" href="#home">হোম</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <!-- পাতা সামগ্রী --> <div class="content"> .. </div>
দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:
/* সাইডবার নেভিগেশন মেনু */ .sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } /* সাইডবার লিঙ্ক */ .sidebar a { display: block; color: black; padding: 16px; text-decoration: none; } /* সক্রিয়/বর্তমান লিঙ্ক */ .sidebar a.active { background-color: #04AA6D; color: white; } /* মাউস অবরোধ করার সময়ের লিঙ্ক শৈলী */ .sidebar a:hover:not(.active) { background-color: #555; color: white; } /* পাতা সামগ্রী।margin-left এর মানটি সাইডবারের width এর মানের সাথে মাথার হবে */ div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } /* প্রস্থ ক্ষেত্রে 700 পিক্সেল এর নিচে, সাইডবারকে টপ বার হিসাবে রূপান্তরিত করা হবে */ @media screen and (max-width: 700px) { .sidebar { width: 100%; height: auto; position: relative; } .sidebar a {float: left;} div.content {margin-left: 0;} } /* প্রস্থ ক্ষেত্রে 400 পিক্সেল এর নিচে, সাইডবারকে ভার্টিক্যাল ধারায় দেখানো হবে, না হলে হলভার্টিক্যাল ধারায় */ @media screen and (max-width: 400px) { .sidebar a { text-align: center; float: none; } }
相关页面
教程:CSS 导航栏