جلسه ۵۵ – منو های افقی در 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;
}

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

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

مرحله بعد، افقی سازی گزینه هاست. این کار رو می‌تونیم به روش های مختلفی انجام بدیم. اما تو اینجا به استفاده از مقدار 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 میزفا مراجعه کنین.

نتیجه گیری

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

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

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

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

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