آموزش زبان HTML (جلسه ۲۰)

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

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

<!DOCTYPE html>
<html>
   
   <head>
       <title>asrefonon</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) منوهای به مراتب زیباتری طراحی خواهیم کرد.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)