جلسه ی هفدهم: ساخت menu در زبان HTML

آموزش ساخت منوتمامی ما حداقل یک بار از منو سایت ها استفاده کرده ایم و می دانیم که چه کاربردی دارند اما اگر بخواهیم برای سایت خود منو بسازیم چه؟؟؟ چگونه می توانیم یک منوی خوب بسازیم؟؟؟ آیا باید از تگ های جدول برای طراحی menu استفاده کنیم یا راه بهتری وجود دارد؟؟؟ برای فهمیدن جواب این سوالات در این آموزش همراه ما باشید.

منو چیست؟

منو ها برای راحت تر شدن دسترسی کاربران به قسمت های مختلف یک سایت یا یک برنامه ایجاد شده اند. عموما منو ها مانند یک راه میانبر برای دسترسی به قسمت های اصلی سایت ها می باشند البته بسته به سایت مورد نظر ما menu می تواند دارای قسمت های اصلی یا فرعی باشد.

همه ی ما عموما به منو ها آشنایی کافی را داریم، به این گونه که از ابتدا با منوی استارت در ویندوز آشنا شده ایم و می دانیم که هر منو دارای زیر منو های مختص خود می باشد.

عموما پر کاربرد ترین منو ها، منو های آبشاری می باشند که درون سایت ها ما ازآن ها استفاده می کنیم. این منو ها به این گونه اند که به قرار گرفتن اشاره گر (ماوس) بر روی آن ها به صورت آبشاری باز می شوند.

 

کاربرد menu در طراحی سایت چیست؟؟

از menu برای ایجاد میانبر برای دسترسی به بخش های مختلف سایت استفاده می شود برای مثال به منو بالای همین سایت توجه کنید. بخش های خانه، مقالات آموزشی و وبلاگ در بالای سایت قرار دارند که منو های اصلی ما می باشند البته بخش های درباره ی ما، ارتباط با ما و… نیز می توانند در این menu قرار بگیرند.

نکته: منو ها می توانند در هر جایی از سایت قرار بگیرند(بالا، پایین، چپ، راست :)) وقرار دادن آن در هر جایی از سایت به خود شما مربوط می باشد.

اجزای اصلی منوها در طراحی سایت

مرحله ی اول: برای ایجاد یک menu ابتدا به یک تگ مادر برای ایجاد لیست نیاز داریم لیست ها عموما به دودسته ی لیست های قابل شمارش و غیر قابل شمارش تقسیم می شوند.

لیست قابل شمارش: برای ایجاد یک لیست قابل شمارش از تگ ol استفاده می کنیم که مخفف کلمه ی ordered list می باشد.

لیست غیر قابل شمارش: برای ایجاد یک لیست غیر قابل شمارش از تگ ul به عنوان تگ مادر استفاده می کنیم که مخفف کلمه ی unordered list می باشد.

نکته: تگ های ol و ul از دسته ی تگ های دوتایی می باشند.

نکته: معمولا برای ایجاد یک لیست در سایت از تگ ul استفاده می شود.

مرحله ی دوم: پس از ایجاد یک کلاس آن را درون اولین تگ ul خود که تگ مادر می باشد قرار می دهیم. به نمونه کد زیر توجه کنید:

<ul class="list">...</ul>

تگ li

در مراحل بالا از تگ های مادر صحبت کردیم اما لیست ها تگ هایی را نیز به عنوان فرزند دارا هستند که اجزای لیست ها را تشکیل می دهند. تگ li تشکیل دهنده ی اجزای لیست می باشد، به منوی همین سایت دقت کنید کلمه ی خانه یا وبلاگ از یک تگ li تشکیل شده است.

 

مرحله ی سوم: بعد از ایجاد تگ ul از تگ li برای تشکیل اجزای لیست استفاده می کنیم. به نمونه کد زیر توجه کنید:

  <ul class="list">
    <li>صفحه ی اصلی</li>
    <li>محصولات</li>
    <li>ارتباط باما</li>
  </ul>

خروجی کد بالا:

تگ li , تگ ol

 

مبحث تکمیلی

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

برای ایجاد زیر menu ابتدا باید منوی مورد نظر خود را که می خواهیم برای آن زیر menu تعریف کنیم را انتخاب نماییم سپس یک بار دیگر تگ ul را درون تگ li ایجاد کنیم سپس زیر منو های مورد نظر خود را درون تگ ul ایجاد نماییم. به نمونه کد زیر توجه کنید:

  <ul class="list">
    <li>صفحه ی اصلی</li>
    <li>محصولات
     <ul>
       <li>موبایل</li>
       <li>لپ تاپ</li>
       <li>مک بوک</li>
     </ul>
    </li>
    <li>ارتباط باما</li>
  </ul>

خروجی کد بالا:

گ li , تگ ol

 

حال اگر بخواهیم نقطه های قبل از زیر منو های خود را حذف کنیم باید به کلاس مورد نظر خود دستور display:block را انجام بدهیم. به نمونه کد زیر توجه کنید:

کد HTML:

  <ul class="list">
    <li>صفحه ی اصلی</li>
    <li>محصولات
     <ul>
       <li>موبایل</li>
       <li>لپ تاپ</li>
       <li>مک بوک</li>
     </ul>
    </li>
    <li>ارتباط باما</li>
  </ul>

کد CSS:

.list li {

display: block;

}

خروجی کد بالا:

استایل display:block

 

ویژگی List-Style-type

از ویژگی List-Style-type برای ایجاد یک علامت برای شماره گذاری موارد درون یک لیست استفاده می شود برای مثال اگر آن را بر روی upper-alpha قرار دهیم از حروف بزرگ انگلیسی برای شماره گذاری استفاده می کند. برای فهم بیشتر به نمونه کد زیر توجه کنید:

کد HTML:

</pre>
<ul class="list">
<li>صفحه ی اصلی</li>
<li>محصولات
<ul>
<li>موبایل</li>
<li>لپ تاپ</li>
<li>مک بوک</li>
</ul>
</li>
<li>ارتباط باما</li>
</ul>
<ul class="list1">
<li>صفحه ی اصلی</li>
<li>محصولات
<ul>
<li>موبایل</li>
<li>لپ تاپ</li>
<li>مک بوک</li>
</ul>
</li>
<li>ارتباط باما</li>
</ul>
<pre>

کد CSS:

.list li {

list-style-type: upper-alpha;

}

.list1 li {

list-style-type: lower-greek;

}

خروجی کد بالا:

ویژگی list-style-type

 

خلاصه مطلب:

  1. منو ها برای راحت تر شدن دسترسی کاربران به قسمت های مختلف یک سایت یا یک برنامه ایجاد شده اند.
  2. عموما پر کاربرد ترین منو ها، منو های آبشاری می باشند که درون سایت ها ما ازآن ها استفاده می کنیم.
  3. از menu برای ایجاد میانبر برای دسترسی به بخش های مختلف سایت استفاده می شود.
  4. برای ایجاد یک لیست قابل شمارش از تگ ol استفاده می کنیم که مخفف کلمه ی ordered list می باشد.
  5. برای ایجاد یک لیست قابل شمارش از تگ ol استفاده می کنیم که مخفف کلمه ی ordered list می باشد.
  6. برای ایجاد زیر menu ابتدا باید منوی مورد نظر خود را که می خواهیم برای آن زیر منو تعریف کنیم را انتخاب نماییم سپس یک بار دیگر تگ ul را درون تگ li ایجاد کنیم سپس زیر منو های مورد نظر خود را درون تگ ul ایجاد نماییم.
  7. حال اگر بخواهیم نقطه های قبل از زیر منو های خود را حذف کنیم باید به کلاس مورد نظر خود دستور display:block را انجام بدهیم.
  8. از ویژگی List-Style-type برای ایجاد یک علامت برای شماره گذاری موارد درون یک لیست استفاده می شود.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها