سلام به کاربران گرامیشاید عنوان این مطلب کمی اغراق آمیز به نظر برسد، اما از عنوان که بگذریم، در این آموزش می خواهیم شما را با نحوه ایجاد نوعی منوهای صفحه به صفحه یا به عبارتی، منوهای هوشمند آشنا کنیم که با تغییر صفحات سایت، لینک صفحه فعال را به صورت مشخص و متمایز از دیگر منوها نشان می دهند

، احتمالا کم و بیش، نمونه هایی از این نوع را در صفحات وب مشاهده کرده اید، ولی شاید برایتان نحوه ساخت آنها تا به امروز حل نشده باقی مانده باشد، اگر اینچنین است، بد نیست با ادامه این آموزش همراه ما باشید تا با هم نگاهی داشته باشیم به نحوه ساخت منوهای هوشمند در سایت با php و css.

منظور از منوی هوشمند چیست؟

همانطور که می دانیم، در حالت معمول، منوهای وب بر اساس رفتارهای قابل ایجاد با کدهای css تنظیم می شوند که به چهار حالت a:link (حالت عادی لینک)، a:visited (حالتی که لینک دیده شده است)، a:hover (حالتی که لینک فعال است و ماوس را روی آن می بریم) و a:active (حالت لحظه ای که روی لینک کلیک می کنیم) محدود می شوند، اما اگر بخواهیم به فرض وقتی کاربر صفحه ای را انتخاب کرد، منوی مربوط به آن صفحه را متمایز از سایر منوها و به حالت انتخاب درآوریم، این روش های معمولی به تنهایی کافی نیستند، لذا باید دست به دامن کدهای سمت سرور و از جمله php شویم تا به طور داینامیک، صفحه ای که کاربر در آن قرار دارد را شناسایی کرده و کلاس متفاوتی به منوی مربوط به لینک آن صفحه در مقایسه با سایر منوها نسبت دهیم، این چیزی است که به اصطلاح می توان بر آن عنوان منوی هوشمند را نهاد.

ساخت منو با تگ ul li

قبل از هر چیز باید منوهایی در صفحه خود بسازیم که قابلیت پذیرش کلاس های css را داشته باشند، در اینجا ما از تگ های استاندارد ul و li بدین منظور استفاده کرده ایم، در زیر یک نمونه ساده را ملاحظه می کنید.

<ul>
<li <?php echo $class_home ?>><a title="خانه" href="/?url=home">خانه</a></li>
<li <?php echo $class_learn ?>><a title="آموزش" href="/?url=learn">آموزش</a></li>
<li <?php echo $class_buy ?>><a title="خرید" href="/?url=buy">خرید</a></li>
<li <?php echo $class_contact ?>><a title="تماس" href="/?url=contact">تماس</a></li>
</ul>

توضیح:
- همانطور که ملاحظه می کنید، ما از ترکیب کدهای php در html برای ایجاد کلاس های داینامیک استفاده کرده ایم (در ادامه خواهیم دید).
- لینک های این منوها کاملا فرضی هستند و صرفا به جهت جنبه آموزشی کار، درج شده اند، در عمل باید آنها را متناسب با سایت خود تنظیم نمائید.

تعریف استایل css برای منوها

پس از اینکه منوهای خود را به صورت ترکیب تگ های html و php ساختیم، باید حالت های فعال و غیر فعال آنها را بر اساس کلاس های css تعریف کنیم، در زیر این کار را جهت نمونه انجام داده ایم.

<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a{
    text-decoration:none;
    color:#06C;
}
a:hover{
    color:#666;
}
.menu-line{
    border-bottom:#930 1px solid;
    display:block;
}
.menu-off{
    display:inline-block;
    list-style:none;
    float:right;
    width:60px;
    height:25px;
    padding-top:8px;
    background-color:#9C0;
    margin:2px;
    text-align:center;
}
.menu-on{
    display:inline-block;
    list-style:none;
    float:right;
    width:60px;
    height:25px;
    padding-top:8px;
    background-color:#CCC;
    margin:2px;
    text-align:center;        
}
.clear{
    clear:both;
}
</style>

توضیح:
- اگر دقت کنید، دو کلاس با نام  menu-off و menu-on با اندکی اختلاف در کدنویسی، در استایل بالا نوشته ایم، کلاس menu-off برای زمانی است که لینک منو در حالت عادی و انتخاب نشده قرار دارد و در مقابل کلاس menu-on برای حالتی است که کاربر بر روی لینک کلیک کرده و وارد آن صفحه شده است.
- دقت کنید که تنظیم شکل ظاهری منو ها بستگی به ذوق و سلیقه خودتان دارد و مهم این است که شما با تکنیک پایه ی کار آشنا شوید، هدف از این آموزش نیز همین است.

کد php و ساخت کلاس داینامیک

اکنون که قسمت html کار را به پایان رسانده ایم، باید با کدنویسی سمت سرور، قابلیت هوشمندی به منوهای خود بدهیم، به این صورت که با شناسایی منوی انتخاب شده توسط کاربر، کلاس  menu-on را برای آن لینک تنظیم کنیم و برای سایر منوها، از کلاس menu-off استفاده نمائیم، این کار چندان پیچیده نیست، کافی است به طور ساده و با متد get پارامتر درخواستی کاربر را شناسایی کرده و متناسب با آن خروجی دهیم.

<?php
//دریافت لینک درخواستی
$url = $_GET['url'];
//ساخت کلاس داینامیک با توجه به لینک درخواستی
if ($url == 'home'){
    $class_home = 'class="menu-on"';
}else{
    $class_home = 'class="menu-off"';
}
if ($url == 'learn'){
    $class_learn = 'class="menu-on"';
}else{
    $class_learn = 'class="menu-off"';
}
if ($url == 'buy'){
    $class_buy = 'class="menu-on"';
}else{
    $class_buy = 'class="menu-off"';
}
if ($url == 'contact'){
    $class_contact = 'class="menu-on"';
}else{
    $class_contact = 'class="menu-off"';
}
?>

توضیح:
- ابتدا متغیر فرضی url را با دریافت پارامترهای درخواستی کاربر تنظیم می کنیم.
- سپس بررسی می کنیم تا ببینیم چه منویی توسط کاربر انتخاب شده است، در این حالت اگر بررسی ما درست (true) بود، کلاس آن را به صورت menu-on خروجی می دهیم و مابقی منوها را به صورت menu-off.
- همانطور که ملاحظه می کنید، تنها با دو دستور ساده if و else در php یک منوی هوشمند ساخته ایم.

کد html و php منو + پیش نمایش

در زیر کد کامل منو به صورت html و php به همراه تصویری جهت نمونه و پیش نمایش قرار داده شده است که می توانید از آن استفاده کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>سلام دیجی | منوی صفحه به صفحه با php و css</title>
<!-- https://hellodigi.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
a{
    text-decoration:none;
    color:#06C;
}
a:hover{
    color:#666;
}
.menu-line{
    border-bottom:#930 1px solid;
    display:block;
}
.menu-off{
    display:inline-block;
    list-style:none;
    float:right;
    width:60px;
    height:25px;
    padding-top:8px;
    background-color:#9C0;
    margin:2px;
    text-align:center;
}
.menu-on{
    display:inline-block;
    list-style:none;
    float:right;
    width:60px;
    height:25px;
    padding-top:8px;
    background-color:#CCC;
    margin:2px;
    text-align:center;        
}
.clear{
    clear:both;
}
</style>
</head>
<body>
<?php
//دریافت لینک درخواستی
$url = $_GET['url'];
//ساخت کلاس داینامیک با توجه به لینک درخواستی
if ($url == 'home'){
    $class_home = 'class="menu-on"';
}else{
    $class_home = 'class="menu-off"';
}
if ($url == 'learn'){
    $class_learn = 'class="menu-on"';
}else{
    $class_learn = 'class="menu-off"';
}
if ($url == 'buy'){
    $class_buy = 'class="menu-on"';
}else{
    $class_buy = 'class="menu-off"';
}
if ($url == 'contact'){
    $class_contact = 'class="menu-on"';
}else{
    $class_contact = 'class="menu-off"';
}
?>
<div class="menu-line">
<ul>
<li <?php echo $class_home ?>><a title="خانه" href="/?url=home">خانه</a></li>
<li <?php echo $class_learn ?>><a title="آموزش" href="/?url=learn">آموزش</a></li>
<li <?php echo $class_buy ?>><a title="خرید" href="/?url=buy">خرید</a></li>
<li <?php echo $class_contact ?>><a title="تماس" href="/?url=contact">تماس</a></li>
</ul>
<div class="clear"></div>
</div>
<hr />
با انتخاب هر کدام از لینک ها، با توجه به پارامتر درخواستی، کلاس css آن به صورت داینامیک تغییر می کند.<br /><br />
کد و آموزش: [<a href="https://hellodigi.ir" title="سلام دیجی | آموزش برنامه نویسی و مهارتهای وب" target="_blank">https://hellodigi.ir</a>]  
</body>
</html>