কিভাবে তৈরি করা যায়: সমান প্রস্থ নেভিগেশন বার লিঙ্ক
কিভাবে তৈরি করা যায়: সমান প্রস্থ নেভিগেশন লিঙ্ক
সমান প্রস্থ মেনু
রেসপনসিভ নেভিগেশন বার তৈরি করুন
প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন：
<!-- নেভিগেশন মেনু --> <div class="navbar"> <a class="active" href="#">Home</a> <a href="#">Search</a> <a href="#">Contact</a> <a href="#">Login</a> </div>
দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন：
/* নেভিগেশন মেনুর শৈলী নির্ধারণ */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}
/* নেভিগেশন লিঙ্ক */
.navbar a {
float: left;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
width: 25%; /* চারটি একই প্রস্থ লিঙ্ক।আপনি যদি দুটি লিঙ্ক আছে, তবে 50% ব্যবহার করুন, তিনটি লিঙ্ক থাকলে 33.33% ব্যবহার করুন, ইত্যাদি। */
text-align: center; /* আপনি যদি চান যে লেখাটি মধ্যস্থানে দেখানো হোক */
}
/* মাউস অবরোধের সময় পিছনভাগের রঙ যোগ করুন */
.navbar a:hover {
background-color: #000;
}
/* বর্তমান/সক্রিয় লিঙ্কের শৈলী নির্ধারণ */
.navbar a.active {
background-color: #04AA6D;
}
/* প্রতিক্রিয় ক্ষমতা যোগ করুন - 500 পিক্সেলের নিচের স্ক্রিনে, নেভিগেশন লিঙ্কগুলোকে পাশাপাশি দেখানোর বদলে পর্যায়ক্রমে দেখানো হোক */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
width: 100%;
text-align: left; /* আপনি যদি চান যে লেখাটি ছোট স্ক্রিনে বাম দিকে জোর দেওয়া হোক */
}
}
