ساخت منوی هوشمند با PHP و CSS

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

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

کدنویسی ساختار منو با تگ ul li

قبل از هر چیز باید تگ هایی در صفحه خود بنویسیم (فایل باید با فرمت php باشد) که قابلیت پذیرش کلاس های CSS را داشته باشند، به عنوان نمونه در کدنویسی ساختار منوی زیر از تگ های استاندارد ul و li بدین منظور استفاده کرده ایم:

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

توضیح:
- از ترکیب دستورات PHP در کدنویسی HTML برای ایجاد کلاس های داینامیک استفاده کرده ایم، دستورات PHP صرفا در فایل های با پسوند php قابل اجرا هستند و این یعنی در وبلاگ های مبتنی بر سرویس های رایگان و کدنویسی صرف HTML امکان استفاده از این شیوه وجود ندارد.
- لینک های نمونه منو کاملا فرضی و صرفا به جهت جنبه آموزشی کار درج شده اند، در عمل باید آیتم ها را متناسب با سایتمان طراحی کنیم.
- تگ ul و li از نظر موتورهای جستجو و مبحث سئو برای ایجاد آیتم هایی که به شکل لیست هستند توصیه می شود، به همین دلیل این تگ ها از نظر معنایی (HTML Semantic) برای ایجاد منوها در صفحات HTML مناسب هستند.

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

پس از اینکه ساختار منوهایمان را به صورت ترکیب تگ های HTML و کدنویسی PHP ساختیم، باید ویژگی های ظاهری آنها را در حالت های فعال و غیر فعال بر اساس کلاس های CSS تعریف کنیم، در استایل زیر این کار را جهت نمونه انجام داده ایم:

<style>
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>

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

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

پس از اینکه قسمت HTML کار را کدنویسی کردیم باید با برنامه نویسی سمت سرور قابلیت داینامیک به منوهای خود بدهیم به این صورت که با شناسایی صفحه انتخاب شده توسط کاربر، کلاس menu-on را برای آیتم منوی مرتبط با آن صفحه تنظیم و برای سایر آیتم های منو از کلاس menu-off استفاده کنیم، انجام این کار چندان پیچیده نیست کافی است با متد GET پارامتر درخواستی کاربر را شناسایی کرده و متناسب با آن خروجی HTML مورد نظر را چاپ کنیم:

<?php
//دریافت پارامتر درخواستی
$param = @$_GET['param'];

//آیتم پیش فرض
if(empty($param)){
    $param = 'home';
}

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

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

کد HTML و PHP منو + پیش نمایش آنلاین

در زیر کد کامل منو به صورت HTML و PHP به همراه نمونه تصویر و لینک پیش نمایش آنلاین آن قرار داده شده است که می توانیم برای تست و بررسی بیشتر از آن استفاده کنیم، دقت کنیم با توجه به استفاده از کدنویسی PHP در ساختار منو نمونه کدها نیز باید در یک فایل با پسوند php به فرض با نام php-css-smart-menu.php ذخیره و در لوکال هاست یا به صورت آنلاین فراخوانی شوند.

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | منوی داینامیک با PHP و CSS</title>
<!-- Webgoo.ir -->
<style>
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
//دریافت پارامتر درخواستی
$param = @$_GET['param'];

//آیتم پیش فرض
if(empty($param)){
    $param = 'home';
}

//ساخت کلاس داینامیک با توجه به پارامتر درخواستی
if($param == 'home'){
    $class_home = 'class="menu-on"';
} else{
    $class_home = 'class="menu-off"';
}
if($param == 'learn'){
    $class_learn = 'class="menu-on"';
} else{
    $class_learn = 'class="menu-off"';
}
if($param == 'buy'){
    $class_buy = 'class="menu-on"';
} else{
    $class_buy = 'class="menu-off"';
}
if($param == '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="?param=home">خانه</a></li>
<li <?php echo $class_learn ?>><a title="آموزش" href="?param=learn">آموزش</a></li>
<li <?php echo $class_buy ?>><a title="خرید" href="?param=buy">خرید</a></li>
<li <?php echo $class_contact ?>><a title="تماس" href="?param=contact">تماس</a></li>
</ul>
<div class="clear"></div>
</div>
پارامتر درخواست شده: <?php echo $param; ?><br>
<hr>
- با انتخاب هر کدام از آیتم های منو با توجه به پارامتر درخواستی کلاس CSS آن به صورت داینامیک تغییر می کند.<br>
- در صورتی که کاربر آیتمی انتخاب نکرده باشد کلاس home به صورت پیش فرض انتخاب می شود.
</body>
</html>

پیش نمایش آنلاین