parsgreen.com
article

ساخت منوی هوشمند با php و css!

php-css-smart-menu

شاید عنوان این مطلب کمی اغراق آمیز به نظر برسد، اما از عنوان که بگذریم، در این آموزش می خواهیم شما را با نحوه ایجاد نوعی منوهای صفحه به صفحه یا به عبارتی، منوهای هوشمند آشنا کنیم که با تغییر صفحات سایت، لینک صفحه فعال را به صورت مشخص و متمایز از دیگر منوها نشان می دهند، احتمالا کم و بیش، نمونه هایی از این نوع را در صفحات وب مشاهده کرده اید، ولی شاید برایتان نحوه ساخت آنها تا به امروز حل نشده باقی مانده باشد، اگر اینچنین است، بد نیست با ادامه این آموزش همراه ما باشید تا با هم نگاهی داشته باشیم به نحوه ساخت منوهای هوشمند در سایت با 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 به همراه تصویری جهت نمونه و پیش نمایش قرار داده شده است که می توانید از آن استفاده کنید.
php-css-smart-menu-example.jpg
<!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>
<!-- http://webgoo.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="http://webgoo.ir" title="وبگو | آموزش برنامه نویسی و مهارتهای وب" target="_blank">http://webgoo.ir</a>]  
</body>
</html>
sectionدسته بندی: آموزش کاربردی » PHP
related مطالب بیشتر:
» ساخت فید خوان آر اس اس (RSS Feed Reader) با php
» آموزش ساخت نقشه سایت (Sitemap) با php و xml
» محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess
» نمایش آمار بازدیدها با PHP بدون استفاده از دیتابیس
» ارسال ایمیل با php و کلاس phpmailer
commentنظرات (۱۸ یادداشت برای این مطلب ارسال شده است)
نویسنده: فریبا
زمان: ۱۹:۱۷:۲۴ - تاریخ: ۱۳۹۱/۰۴/۱۱
سلام
عالی بود.
نویسنده: فریبا
زمان: ۱۹:۱۹:۴۹ - تاریخ: ۱۳۹۱/۰۴/۱۱
سلام
اگه امکان دارد در مورد منوهای آبشاری (افقی و عمودی) هم آموزشی در وب سایتتان قرار دهید.
ممنون
پاسخ: 
سلام
ضمن تشکر، در آموزش های بعدی و به مرور، به این مورد نیز خواهیم پرداخت.
نویسنده: مجتبی
زمان: ۱۹:۵۱:۰۸ - تاریخ: ۱۳۹۱/۰۴/۲۵
من یه سایت کوچیک فروشگاهی پی اچ پی می خاستم با توضیحات کامل فارسی سایت و پایگاه داده و ارتباطشون اگه هزینه هم داشت در خدمتم فقط طوری باشه که توان ارائه برای من مبتدی باشه ممنون.
پاسخ: 
سایت شما نیاز به یک CMS مخصوص برای این کار دارد، متاسفانه ما در این زمینه فعالیتی نداریم، توصیه ما این است که یا خودتان آنقدر باید مسلط باشید و وقت بگذارید، سیستم مدیریت محتوا را ایجاد کنید، یا اینکه از یک سیستم open source مانند جوملا، وردپرس و... استفاده کنید، مشکلات احتمالی کار با php را هم می توانید با ما مطرح نمائید، تا جایی که بتوانیم و در حد دانش محدودمان باشد، کمک خواهیم کرد.
نویسنده: حسن
زمان: ۰۵:۲۲:۱۸ - تاریخ: ۱۳۹۱/۰۵/۲۵
عالی بود .
یه سوال داشتم در مورد مدیریت تگ ها یه آموزش قرار بدید
مثلا همین که من تگ می ذارم در باره این مقاله و شما پاسخ می دید
پاسخ: 
در مطالب آینده به نحوه ارسال و مدیریت نظرات در سایت نیز خواهیم پرداخت.
نویسنده: حسين
زمان: ۱۹:۵۱:۵۴ - تاریخ: ۱۳۹۱/۰۶/۱۷
عالي ي ي ي ي ي ي
ممنونم
نویسنده: مهرداد
زمان: ۰۰:۱۹:۵۴ - تاریخ: ۱۳۹۱/۰۶/۱۸
سلام
یه سوال داشتم در مورد اینکه وقتی مثلا روی تماس کلیک می کنیم باید انتظار داشته باشیم که صفحه ای با همین منو که تماس آن در حالت فعال (خاکستری) قرار دارد ظاهر شود
لطفا در مورد صفحه ای که باید به آن هدایت شود بیشتر توضیح دهید
آیا باید یک فایل پی اچ پی یا اچ تی ام ال جداگانه برای هر یک از گزینه ها بسازیم؟!
با تشکر از زحمات شما
پاسخ: 
سلام
اینکه یک فایل جداگانه بسازید یا در همان صفحه اطلاعات را تجزیه تحلیل کنید، دست خودتان است و هیچ اجبار یا محدودیتی وجود ندارد، در واقع نوع برنامه نویسی صفحه تعیین می کند که کدام روش را انتخاب کنید، به فرض اگر برای صفحه تماس یک فایل جداگانه در نظر گرفته اید، طبیعتا باید آدرس آن فایل را در لینک منو قرار دهید یا اینکه با بررسی پارامتر ارسالی در لینک منو، فایل مورد نظر را در صفحه اصلی include کنید.
در کل با php محدودیتی از این لحاظ وجود ندارد.
زمان: ۲۱:۰۷:۱۴ - تاریخ: ۱۳۹۱/۰۹/۱۴
سلام ممنونم آموزشی ها بسیار متنوع و خوب هستند .
نویسنده: علی محمدی
زمان: ۲۳:۱۰:۳۶ - تاریخ: ۱۳۹۱/۰۹/۱۵
سلام خسته نباشید یه سوال دارم ربطی به این مطلب نداره ، اگه بخوایم تو این تابع بعد از متغیر test یک اینتر بزاره چی باید کرد؟
fwrite($file,. $test);
پاسخ: 
سلام
از علامت n\ یا r\n\ استفاده و آن را به انتهای متغیر اضافه کنید، به طور مثال:
fwrite($file, ($test."\r\n"));
نویسنده: سپيده
زمان: ۰۹:۰۸:۰۳ - تاریخ: ۱۳۹۱/۱۱/۰۳
سلام . با تشكر از اين اموزش. اگه ممكنه در مورد منوهاي هوشمند كه داراي زيرمنو هم باشند (آبشاري) مطلب بذاريد . مرسي از سايت خوبتون.
پاسخ: 
سلام
ممنون از پیشنهاد شما، البته آموزش ساخت منوی آبشاری در سایت وجود دارد و می توانید این مطلب را با آن به نوعی ترکیب کنید.
نویسنده: کیمیا
زمان: ۱۲:۲۷:۰۷ - تاریخ: ۱۳۹۱/۱۲/۲۱
سلام من با دوستم یک پروژه گرفتیم و کلاس طراحی سایتم میریم ولی استادمون چیزی بارش نیست. پروژمون مونده چیکار کنم!!! کمکم کنید
پاسخ: 
سلام
اگر در بخش خاصی از پروژه مشکلی دارید و پروژه به زبان php است، با ذکر جزئیات و نمونه کد، می توانیم راهنمایی کنیم.
نویسنده: amirchermahini
زمان: ۱۷:۵۴:۲۹ - تاریخ: ۱۳۹۲/۰۱/۱۸
با سلام و عرض ادب و احترام
و عرض تبریک به مناسبت فرا رسیدن سال جدید
و ارزوی توفیق وسلامتی و موفقیت در این سال جدید
عذر میخوام اگه به شب عید خوردیم و نتونستیم وارد مبحث اموزش جدادگانه بشیم اما امیدوارم در این سال جدید بتونم روی کمک شما استاد بزرگوارم حساب کنم
بزودی با همان فرم تماس با ما با شما تماس خواهم گرفت طبق فرمایش شما بزرگوار
سوال:
ایا میشه در طراحی سایت php رو داخل کدهای html استفاده کرد و با فرمت html ذخیره کرد یا اینکه نمیشه
و باید html رو داخل کدهای php نوشت و استفاده کرد
اگه ممکنه در این خصوص کمی توضیح بدین چون توی هیچ سایتی ندیدم که حتی اشاره ای به این موارد کرده باشه
و اگه میشه php رو درون html بکار برد و با فرمت html ذخیره کرد چرا وقتی اون رو در ریشه wampserver ذخیره میکنم
و بعد ادرسش رو میدم بازش نمیکنه ؟
با تشکر از راهنماییهای شما
و ارزوی توفیق
پاسخ: 
سلام
خیر، نمی توانید داخل یک فایل HTML (با فرمت htm یا html) کدهای PHP را درج کنید، کدهای PHP باید داخل فایل هایی با پسوند php نوشته و اجرا شوند، اما داخل فایل های php می توانید دستورات HTML را (خارج از تگ های اختصاصی) بنویسید یا درون دستورات خروجی بگیرید، درک کامل این مسئله نیازمند کسب تجربه بیشتر در این زبان برنامه نویسی است.
نویسنده: mahdi
زمان: ۱۰:۰۲:۱۱ - تاریخ: ۱۳۹۲/۰۴/۳۰
سلام
سایت بسیار مفیدی دارید
تمامی مقاله هاتون رو دارم میخونم
امیدوارم موفق باشید و به راهتون ادامه بدید.
اگر لطف کنید مقاله های بیشتری و مثال های بیشتری از php بذارید
ممنون
نویسنده: mohammad
زمان: ۱۰:۴۰:۱۲ - تاریخ: ۱۳۹۲/۰۶/۲۸
سلام
من همۀ کارهایی که گفته شد رو انجام دادم. منو را ساختم؛ دو تا لینک داخلی و دو تا خارجی. {نکتۀ جالب: اگر اسم یک منو، متشکل از دو کلمه باشد یعنی بین حروف، فاصله درج شود، صفحۀ سایت لود نمی‌شود!!} دو لینک خارجی را از فرایند خارج کردم و ماند دو لینک داخلی (HOME و CONTACT). روی لینک این دو عضوِ منو که کلیک می‌کنم کلاس تغییر می‌کند و می‌شود همان که خواستم (یعنی مثلا menu-on). اما نکته اینجاست که لینک، عمل نمی‌کند! مثلا بر روی CONTACT که کلیک می‌شود، صفحۀ موجود را ری‌لود می‌کند! با آدرسِ
http://www.stakhr.ir/?url=CONTACT
و نمی‌رود به آدرس اصلی، یعنی:
http://www.stakhr.ir/contact
به نظر شما مشکل از کجاست؟!
این هم کدها:
<?php
$url = $_GET['url'];
if ($url == 'HOME'){$class_HOME = 'class="navvisited"';}else{$class_HOME = 'class="nav"';}
if ($url == 'CONTACT'){$class_CONTACT = 'class="navvisited"';}else{$class_CONTACT = 'class="nav"';}
?>
<ul> <!-- MENU -->

<li <?php echo $class_OtherGallery ?>><a href="http://www.pool.stakhr.ir/استخر-جکوزی-سرامیک-ceramic-tile-jacuzzi" title="POOL.STAKHR.IR">OtherGallery</a></li>
<li <?php echo $class_CONTACT ?>><a href="?url=CONTACT" title="STAKHR.IR"><?php _e('CONTACT'); ?></a></li>
<li <?php echo $class_StakhrGallery ?>><a href="http://www.pool.stakhr.ir" title="POOL.STAKHR.IR">StakhrGallery</a></li>
<li <?php echo $class_HOME ?>><a href="?url=HOME" title="STAKHR.IR"><?php _e('HOME'); ?></a></li>
پاسخ: 
سلام
به نظر می رسد بدون اینکه با ساختار URL سیستم مدیریت سایت خود آشنا باشید، صرفا قصد ایجاد منوی هوشمند را دارید، آنچه که در آموزش گفته شده صرفا یک الگو و مثال است و برای هر سیستمی باید متناسب با ساختار تعریف شده آن عمل کنید، به ظور مثال اگر سیستم سایتتان از لینک های استاتیک استفاده می کند، باید در همان چارچوب امکانات جدید را توسعه دهید (این کار نیازمند آشنایی و تسلط بالای شما با کدنویسی برنامه مدیریت سایتتان است).
نکته دوم اینکه برای رفع اینگونه خطاها، کافی است به سورس کد خروجی دقت کنید، سورس کد نشان می دهد که آیا برنامه شما کدها را به صورت استاندارد تولید می کند یا خیر و در صورتی که پاسخ خیر بود، باید در سدد رفع خطا باشید.
نویسنده: محم دحسین
زمان: ۱۲:۲۶:۵۱ - تاریخ: ۱۳۹۳/۰۱/۲۲
سلام
چه جوری میشه فقط با css توی منوی navagtion بخشی که فعال تو منو رو یعنی همون صفحه ای رو که کاربر انتخاب رو استایل خاصی بهش بدیم؟ مثل منوی قالب صفحه وردپرس
پاسخ: 
سلام
با صرف CSS امکانپذیر نیست، باید آن را با JavaScript یا jQuery ترکیب کنید!، راه بهتر استفاده از کدهای سمت سرور و تغییر کلاس بلاک مورد نظر به صورت داینامیک است، یعنی کلاس هر بلاکی که انتخاب شده باشد، نسبت به بقیه متفاوت خروجی داده شود (منوی هوشمند را در وب جستجو کنید).
نویسنده: امیر
زمان: ۱۱:۱۶:۳۵ - تاریخ: ۱۳۹۳/۰۳/۰۱
دمتون گرم مطالب خیلی خوبی دارین
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

8 × 6
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...