امتیاز دهید:

یکی از راه های ساخت منو در صفحات وب استفاده از تگ های لیست <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) منوهای به مراتب زیباتری طراحی خواهیم کرد.


نظرات
نظرات
  • امید :

    سلام ی سوالی داشتم :
    ی لیست کشویی درست کردم میخام با کلیک کردن بر روی هرگزینه صفحه مرربوطه را باز کند یعنی گزینه هارو لینک کنم لطفا راهنماییم کنید ممنون میشم .


    1394/11/14 10:03:53
  • ناشناس :

    خیلی کمکم کرد دمت گرم


    1394/06/19 16:59:12
  • nasim :

    سلام . ممنون از سایت بسیار مفیدتان

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


    1394/05/21 20:52:24
  • مهدی :

    خیلی ممنون از ادمین از این سایت خوبتون من کد تصویر امنیتی رو بلد نیستم چون فقط 1 ماه میرم کلاس برنامه نویسی میشه خواهش کنم اونم بزاری


    1394/04/27 14:58:54