منو هاي افقي يكي از بهترين راه براي به نمايش گذاشتن شاخه هاي مختلف يك وب سايت است و به كمك آن مي توانيد بخش يا بخش هاي خاصي از وب سايت خود را در معرض توجه بازديدكنندگان قرار دهيد. بسياري از طراحان يك منوي افقي شامل پیوند های مهم وب سايت زير هدر قرار مي دهند تا به خوبي ديده شوند.
منو هاي افقي به كمك دستورات HTML ليست مي شوند اجازه دهيد اين فرايند را با يك ليست ساده شروع كنيم.

ايجاد يك منو يا ليست افقي

در زير يك ليست ساده مي بينيد كه در ادامه مي خواهيم آنرا به ليست افقي تبديل كنيم. توصيه مي كنم ليست خود را تا حد ممكن كوچك نگه داريد تا در قالب شما ايجاد اشكال نكند. معمولا اين ليست ها را در قالب هاي استاندارد وردپرس با عبارت navmenu نامگذاري مي كنند و ما هم چنين كرديم.

<div id=”navmenu”>
<ul>
<li><a href=”<?php echo get_settings(‘home’); ?>”>HOME</a></li>
<li><a href=”wordpress/recipes/”>RECIPES</a></li>
<li><a href=”wordpress/travel/”>TRAVEL</a></li>
<li><a href=”http://www.yadbegir.com”>YADBEGIR</a></li>
</ul>
</div>

همانطور كه مشاهده مي كنيد در ليست ما يك سري كد هاي PHP وجود دارد تا صفحه اصلي يا همان home page را ايجاد نمايد و شاخه هاي ديگر هم به صورت كد هاي html تعريف شده اند تا ليست ما را تكميل كنند. لیست فوق در برابر کاربر به صورت زیر نمایش داده می شود:

• HOME

• RECIPES

• TRAVEL

• YADBEGIR
  

همچنين مي توانيد از دستور

wp_list_categories()

وردپرس براي ليست كردن شاخه ها استفاده كنيد و اگر بخواهيد فقط چند شاخه خاص را در منو داشته باشيد و بقيه را حذف كنيد
برای نمایش شاخه هایی خاص مي توانيد از include استفاده كنيد بايد كد هاي قالب خود را به اين شكل اصلاح كنيد:

<div id="navmenu">
<ul>
<li><a href="<?php echo get_settings('home'); ?>">HOME</a></li>
<?php wp_list_categories('orderby=name&include=1,4,7,8'); ?>
<li><a href="http://www.wordpress.org">WORDPRESS</a></li>
</ul>
</div>

همانطور كه در كد ها مشاهده مي كنيد شاخه هاي 1و4و7و8 در ليست انتخاب شده اند تا نمايش داده شوند و بقيه از ليست حذف شده اند. معمولا كد هاي اين ليست را در پايان فايل هدر قالب يا بعد از آن قرار مي دهند. شما با باز كردن فايل header.php در دايركتور قالب خود و قرار دادن اين كد ها در آن مي توانيد ليست خود را به قالب وب سايت تان اضافه كنيد. حتما آنها را در بين تگ هاي DIV قرار دهيد.

اصلاح از طريق CSS

به صورت پيش فرض ليست ها به صورت عمودي نمايش داده مي شوند، و هر كدام در يك خط قرار مي گيرند. همچنين يك دايره سياه كوچك پشت آنها ظاهر مي شود و به اين ترتيب نشان مي دهند كه يك ليست هستند اما اين تركيب براي نمايش مهمترين شاخه هاي يك وب سايت مناسب نيست. بنابراين لازم است كه براي آن يك سبك نمايش تعريف نماييم. و در اين اولين قدم اين دايره هاي سياه رنگ و فضاي اضافي يا همان PADDING را حذف كنيم.

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }

اگر فايل CSS  جدید خود را آپلود نماييد يا به سرور منتقل نماييد و صفحه وب سايت خود را ريفرش نماييد مشاهده خواهيد كرد كه ديگر خبري از آن دايره هاي سياه رنگ نيست و همچنين فضاي اضافي كه قبل از هر سطر ليست مشاهده مي كرديد هم از بين رفته است.
حال ما نياز به ترفندي داريم كه به كمك آن بتوانيم اين ليست را به يك خط افقي تبديل نماييم. بنابراين براي آيتم ليست يك style تعريف مي كنيم:

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }

چون اينها لينك هستند بايد آنها را هم تصحيح كنيم. براي اين منظور كارهاي بسياري مي توان انجام داد، اما در اينجا بين ليست لينك ها فاصله ايجاد مي نماييم تا از تجمع آنها در كنار يكديگر جلوگيري كنيم و خطي را كه به صورت پيش فرض زير لينك هاي ايجاد مي شود را حذف مي كنيم همچنين كاري مي كنيم كه وقتي كه موس روي لينك قرار مي گيرد تغيير رنگ دهد.

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; padding: 5px 20px 5px 20px}
#navmenu a {text-decoration:none; color: blue; }
#navmenu a:hover {color: purple; }

خوب اجازه دهيد يك مرحله ديگر هم پيش برويم و براي ليست شاخه هاي خود يك پشت زمينه تعريف كنيم به گونه اي كه با قرار دادن موس روي هر لينك رنگ پشت زمينه و نوشته هر دو تغيير كنند:

#navmenu ul {margin: 0; padding: 0;
list-style-type: none; list-style-image: none; }
#navmenu li {display: inline; }
#navmenu ul li a {text-decoration:none; margin: 5px;
padding: 5px 20px 5px 20px; color: blue;
background: pink;}
#navmenu ul li a:hover {color: purple;
background: yellow; }

اين يك آموزش ساده براي ايجاد منوهاي افقی در وردپرس بود كه با تغييرات كمي مي توانيد آنرا براي سيستم هاي ديگر مديريت محتوا هم استفاده كنيد. البته با توجه به تم و طيف رنگي كه در وب سايت خود استفاده مي كنيد مي توانيد تغييرات زيادي در اين ليست ايجاد كنيد كه همه به شما به عنوان طراح و البته سلیقه و نیاز مشتري شما بستگي دارد.
پيروز باشيد
علي يزدي مقدم
مطالب مرتبط:

• خلاصه کردن فایل های CSS
• دومین را ثبت کنم یا بخرم
• کدام سيستم مديريت محتوا را براي طراحي وب سايت انتخاب کنم؟
• منطق طراحی وب سایت
• افزایش امنیت در وردپرس با استفاده از wp-includes
• طراحی وب سایت رنگ ها – کدام رنگ می تواند فروش وب سایت را بالا ببرد؟
• افزودن جلوه سایه با استفاده از css