آموزش CSSآموزش طراحی سایت

جلسه ۵۵ – منو های افقی در CSS

آموزش منوی Horizontal در CSS

منظور از منوی افقی چیست؟ چگونه منو های افقی بسازیم ؟ چگونه منوی عمودی را به افقی تبدیل کنیم؟

منو های افقی، منو هایی هستن که گزینه ها در اون ها، به صورت افقی کنار هم قرار گرفتن.

منو های افقی در مقایسه با منو های عمودی، استفاده ی خیلی بیشتری دارن.

تو این مقاله، نحوه طراحی این منو ها رو به صورت قدم به قدم با هم بررسی می‌کنیم.

مرحله اول – ساختار منو های افقی

در مقاله قبلی آموزش طراحی سایت با CSS ، در رابطه با منوی های عمودی در CSS صحبت کردیم. برای ساخت منو های افقی هم از ساختار زیر استفاده می‌کنیم.

<ul>
   <li>صفحه اصلی</li>
   <li>مقالات</li>
   <li>پژوهش ها</li>
   <li>درباره ما</li>
</ul>

همونطور که مشاهده می کنین، ساختار HTML منو های افقی، هیچ فرقی با منو های عمودی نداره و دقیقا مثل اون ها، از عناصر ul و li استفاده می‌کنه.

نتیجه کد HTML بالا به شکل زیر خواهد بود:

مرحله اول - ساختار منو های افقی

مرحله دوم – خاصیت list-style-type

حالا باید یه جلای خاصی به منوی مورد نظرمون بدیم.

  • دایره های مزاحم پشت گزینه ها رو حذف کنیم.
  • اونا رو به صورت افقی پشت هم بچینیم.

برای حذف دایره ها، دقیقا مثل منو های عمودی، از خاصیت list-style-type استفاده می‌‌کنیم و همزمان، برای حذف پدینگ باقی مونده از اون دایره ها، از padding-right:0 استفاده می‌کنیم:

<ul>
   <li>صفحه اصلی</li>
   <li>مقالات</li>
   <li>پژوهش ها</li>
   <li>درباره ما</li>
</ul>
ul{
   list-style-type: none;
   padding-right:0px;
}

که نتیجه به شکل زیر ظاهر میشه:

مرحله دوم - خاصیت list-style-type

مرحله سوم – چینش افقی گزینه ها در منو

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

ul{ 
   list-style-type: none; 
   padding-right:0px;
}
li{
   display: inline-block;
}

نتیجه به صورت زیر خواهد بود:

مرحله سوم - چینش افقی گزینه ها در منو

اگه جایی از مقاله براتون مبهم بود، حتما تو قسمت نظرات بپرسین تا من یا دیگر اعضای تیم میزفا یاریتون کنیم 🙂

مرحله سوم – استایل دهی به منو های افقی

حالا نوبت به استفاده از خاصیت هایی مثل padding و رنگ های مختلف می‌رسه.

توسط این خاصیت ها، منو رو به یک منوی واقعی نزدیک و نزدیک تر می‌کنیم.

اضافه کردن رنگ های مناسب

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

<ul>
   <li>صفحه اصلی</li>
   <li>مقالات</li>
   <li>پژوهش ها</li>
   <li>درباره ما</li>
</ul>

حالا با استفاده از کد CSS زیر:

ul{ 
   list-style-type: none; 
   padding-right:0px;
   background-color:#141414;
}
li{
   color:#00b318;
   display: inline-block;
}

به نتیجه زیر دستت پیدا می‌کنیم:

اضافه کردن رنگ های مناسب

اضافه کردن پدینگ مناسب

قدم بعدی ما، اضافه کردن خاصیت padding به گزینه ها و تغییر دادن فونت مورد نظره:

<ul>
   <li>صفحه اصلی</li>
   <li>مقالات</li>
   <li>پژوهش ها</li>
   <li>درباره ما</li>
</ul>

حالا کد زیر رو اضافه می‌کنیم:

اضافه کردن پدینگ مناسب

استفاده از مقادیر fixed و sticky در منو های افقی

می‌تونیم به وفور استفاده از این روش رو تو وب سایت های مختلف ببینیم.

همونطور که می‌دونیم مقادیر fixed و sticky از مقادیر خاصیت position هستن که کاربرد اون ها عبارت هست از:

  • fixed: عنصر مورد نظر رو سر جاش ثابت نگه می‌داره و با اسکرول کردن جاشو تغییر نمی‌ده.
  • sticky: عنصر مورد نظر رو تو وهله اول سر جاش نگه می‌داره، اما با اسکرول کردن اون رو به بالای صفحه می‌فرسته و از اون به بعد مثل عنصر fixed رفتار می‌کنه.

برای استفاده از این دو مقدار، کافیه اون ها رو به عنصر ul تو CSS اضافه کنیم:

/* ----- fixed ---- */
ul{
position: fixed;
}
/* ----- sticky ---- */
ul{
position: sticky;
}

برای مطالعه بیشتر در مورد مقادیر sticky‌ و fixed، می‌تونین به مقاله خاصیت position در CSS میزفا مراجعه کنین.

نتیجه گیری

تو این مقاله، با ساختن یک منوی افقی آشنا شدیم و دیدیم که چطور طی چند مرحله ساده، می‌تونیم یک منوی افقی داشته باشیم.

تو مقاله بعدی، مثال های بیشتر و جذاب تر، و همچنین قابلیت های جالب تری از منو ها رو با هم یاد می‌گیریم 🙂

با ما همراه باشین!

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌ شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر