جلسه ۵۵ – منو های افقی در 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 میزفا مراجعه کنین.

نتیجه گیری

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

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

9 نظر

9 پاسخ

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

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

    1. سلام وقت بخیر باشه
      ما انجام نمیدیم.
      لطفا وارد سایت پونیشا بشید و کلی آدم هست که اونجا میتونه به شما کمک کنه.
      پروژه های ۰ تا ۱۰۰ طراحی رو ما فقط انجام میدیم.

  3. سلام خسته نباشید سوالم اینک قالبم ی منوی عمودی داره می خوام تبدیلش کنم ب افقی منظورم رو متوجه میشین؟یعنی قسمت طراح قالب و ایمیل و درباره ما و ….. بره زیر هدر بالای منوی وسط امیدوارم منظورم رو متوجه شده باشین ، منتظر پاسختون هستم

    1. سلام
      باید بدید طراح بزنه.
      سرچ کنید
      horizontal menu codepen
      نمونه کدها رو توی نت مشاهده کنید.

  4. سلام جناب خسته نباشید سوال برنامه نویسی داشتم اگ بگم کمکم می کنید؟!

  5. سلام چرا border در منوهای افقی برای تگ های ul و li کار نمی کند؟

    1. سلام نعمت اله، کی گفته کار نمیکنه؟ کدت رو بفرست مشکلت رو حل کنیم.

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

نشانی ایمیل شما منتشر نخواهد شد.

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=