\r\n

یکی از راه های ساخت منو در صفحات وب استفاده از تگ های لیست <ul> است. برای این منظور کد زیر را وارد ویرایشگر خود می کنیم:

<!DOCTYPE html>
<html>
  
   <head>
       <title>Netshahr</title>
   </head>
  
   <body>
       <ul>
           <li>Menu Item 1</li>
           <li>Menu Item 2</li>
           <li>Menu Item 3</li>
           <li>Menu Item 4</li>
       </ul>
   </body>
</html>

پس از باز کردن این فایل در مرورگر، نتیجه زیر مشاده خواهد شد:

ساخت منو با استفاده از تگ های لیست در اچ تی ام ال

اکنون برای تبدیل این لیست به یک منو نیاز به استفاده از کدهای سی اس اس (CSS) داریم. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

   <body>
       <ul style="list-style-type:none">
           <li>Menu Item 1</li>
           <li>Menu Item 2</li>
           <li>Menu Item 3</li>
           <li>Menu Item 4</li>
       </ul>
   </body>

با مشاهده مجدد این صفحه در مرورگر مشاهده خواهیم کرد که بولت های کنار آیتم های لیست حذف شده اند:

استفاده از سی اس اس برای ساخت منو در اچ تی ام ال html

همانطور که در کد فوق مشاهده می شود، برای تگ <ul> یک Attribute از جنس style تعریف کرده ایم و مقدار آن را برابر با list-style-type:none; قرار داده ایم. کاری که این خط از کد انجام می دهد این است که لیست ما را به صورت ساده در مرورگر به نمایش در می آورد.
در گام بعدی نیاز است تا کلیه تگ های <li> را در خط افقی در کنار یکدیگر قرار دهیم. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

   <body>
       <ul style="list-style-type:none">
           <li style="display:inline;">Menu Item 1</li>
           <li style="display:inline;">Menu Item 2</li>
           <li style="display:inline;">Menu Item 3</li>
           <li style="display:inline;">Menu Item 4</li>
       </ul>
   </body>

پس از به روز رسانی مرورگر نتیجه زیر به نمایش درخواهد آمد:

استفاده از دستور inline برای ساخت منو

 کاری که در کد فوق انجام داده ایم این است که با استفاده از دستور سی اس اس (CSS) مرتبط با لیست ها که display:inline; نام دارد، کلیه آیتم های لیست را در یک خط قرار داده ایم. حال به سادگی با استفاده از تگ <a> می توان هر یک از گزینه های لیست را به یک لینک به بخش های مختلف سایت مبدل ساخت. برای این منظور کد فوق را به صورت زیر تکمیل می کنیم:

   <body>
       <ul style="list-style-type:none">
           <li style="display:inline;">
	               <a href="">Menu Item 1</a>
           </li>
           <li style="display:inline;">
	               <a href="">Menu Item 2</a>
           </li>
           <li style="display:inline;">
	               <a href="">Menu Item 3</a>
           </li>
           <li style="display:inline;">
	               <a href="">Menu Item 4</a>
           </li>
       </ul>
   </body>

همانطور که می بینیم با استفاده از تگ های <a> و </a> هر یک از آیتم های لیست را به یک لینک تبدیل کرده ایم اما در href هیچ گونه آدرسی تعریف نکرده ایم که می بایست آدرس مد نظر برای صفحات مختلف سایت در آن قرار گیرد:

تبدیل به لینک های آیتم های یک منو در اچ تی ام ال html

پس از آشنایی بیشتر با کدهای سی اس اس (CSS) منوهای به مراتب زیباتری طراحی خواهیم کرد.