یکی از رایج‌ترین چالش‌هایی که توسعه‌دهندگان وب با آن مواجه می‌شوند، نحوه مدیریت دکمه‌های فعال و غیرفعال در یک نوار ناوبری بدون تکرار بیش از اندازه کد است. در نظر داشته باشید که مفاهیم DRY (Don't Repeat Yourself) در برنامه‌نویسی بسیار مهم هستند، اما گاهی اوقات باید روشی پیدا کنیم که به سرعت و با کمترین تغییرات، به نتیجه دلخواه برسیم.
فرض کنید شما یک نوار ناوبری ساده دارید و می‌خواهید دکمه‌های فعال (current) و غیرفعال (inactive) آن را مدیریت کنید. در این مثال، به جای استفاده از روش‌های پیچیده و یا اضافه کردن فریم‌ورک‌ها، با استفاده از یک تکنیک ساده که حداقل نیاز به تکرار دارد، این کار را انجام می‌دهیم.
ابتدا باید HTML صفحه را طراحی کنید. برای ساخت نوار ناوبری از تگ‌های ul و li استفاده می‌کنیم. سپس با CSS وضعیت فعال و غیرفعال را مدیریت می‌کنیم.
به یاد داشته باشید که ما باید کدی بنویسیم که قابل مدیریت باشد و بتوانیم به راحتی آن را به هر صفحه یا پروژه دیگری اضافه کنیم. این هدف این مثال است.
کد HTML و CSS
<ul class="navbar">
<li class="nav-item active">Home</li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</li>
</ul>
<style>
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav-item {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-item:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
}
</style>
توضیح کد خط به خط
<ul class="navbar">- یک لیست بدون شماره‌گذاری ایجاد می‌کند که نقش نوار ناوبری را بازی می‌کند.<li>- آیتم‌های نوار ناوبری را مشخص می‌کند.class="nav-item active"- کلاس‌های CSS برای مدیریت وضعیت ظاهری آیتم،activeنشان می‌دهد این آیتم فعال است..navbar- استایل کلی نوار ناوبری را تنظیم می‌کند، مانند پس‌زمینه و موقعیت‌یابی..nav-item- استایل پایه‌ای برای هر آیتم ناوبری ارائه می‌دهد، شامل رنگ متن و طراحی شناور..nav-item:hover- حالت هاور را تعریف می‌کند که وقتی موس روی آیتم باشد، رنگ‌ها تغییر می‌کند..active- استایل خاصی برای آیتمی که فعال است تعریف می‌کند، به وسیله تغییر رنگ پس‌زمینه.