جلسه ۵۶ – ویژگی های پیشرفته تر منو ها

چگونه می‌توانیم منوی پیشرفته بسازیم؟ منو ها چه ویژگی های پیشرفته ای می‌توانند داشته باشند ؟ تو این مقاله، چند ویژگی که می‌تونن منو های ما رو بهتر کنن یاد می‌گیریم.

همچنین در انتها، یک سری مثال کاربردی رو با هم بررسی می‌کنیم.

استفاده از شبه کلاس ها در منو ها

به طور کلی، برای ساختن منو های عالی، چه افقی و چه عمودی، بهتره که از دو قانون تبعیت کنیم:

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

شبه کلاس ها می‌تونن نقش بسیار پر اهمیت و حیاتی ای رو در تبعیت کردن از این قوانین بازی کنن.

اصلی ترین شبه کلاسی که ازش استفاده می کنیم. شبه کلاس hover هست.

همونطور که تو مقاله حالت های مختلف لینک ها یاد گرفتیم، توسط شبه کلاس hover، می‌تونیم استایل یک عنصر رو، زمانی که نشانگر رو روش می‌بریم تغییر بدیم، یعنی همون قانون اول!

حالا می‌خوایم این دو قانون رو روی منوی افقی ای که جلسه پیش بررسی کردیم، پیاده کنیم.

برای هنرجو هایی که یادشون رفته یا مستقیم سراغ این مقاله اومدن،‌ منو این بود:

تغییر استایل گزینه در حالتی که نشانگر بر اون قرار می‌گیره

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

کد HTML رو که نوشته بودیم، CSS رو یخورده تغییر می‌دیم:

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

و کد CSS:

ul{ 
   list-style-type: none; 
   padding-right:0px;
   background-color:#141414;
   width:100%;
}
li{
   color:#00b318;
   display: inline-block;
   font-family: iransansweb;
   padding:20px;
}
li:hover{
   background-color: #00b318;
   color:white;
}

حالا کافیه که نشانگر رو روی گزینه “صفحه اصلی” ببریم. نتیجه رو به شکل زیر مشاهده می‌کنیم:

تو نتیجه فوق، با رفتن روی گزینه ها، رنگ پیش زمینشون سبز و رنگ فونتشون سفید می‌شه.

این موضوع رو می‌تونیم تو منو های عمودی هم به همین منوال پیاده سازی کنیم. اون رو به شما می‌سپارم، فقط بدونین که باید به نتیجه زیر برسین:

تغییر استایل گزینه ای که فعاله

حالا باید اون گزینه ای که داخلش هستیم (به فرض صفحه اصلی) از بقیه متفاوت به نمایش در بیاد.

این کار با CSS به راحتی انجام نمیشه، و باید از جاوااسکریپت استفاده کنیم، توضیح کامل این فرآیند از وظیفه مقالات آموزش CSS خارجه و نیاز نیست شما هم خیلی روش تمرکز کنین.

اما بازم برای هنرجو های کنجکاو یه راهنمایی می‌زاریم 🙂

کافیه یک کلاس کمکی به نام active بسازیم:

.active{ 
   background-color: #00b318; 
   color:white; 
}

بعد از ساختن کلاس کمکی، کافیه کد جاوااسکریپتی بنویسیم که در دو مرحله زیر کار کنه:

• حواسش به کلیک شدن هر کدوم از گزینه ها باشه، و اگه گزینه ای کلیک شد کلاس active رو بهش بده.
• قبل از اینکه کلاس active رو به گزینه مورد نظر بده، تمام گزینه های دیگه رو بررسی کنه و اگه گزینه ای دارای این کلاس بود، کلاس رو ازش بگیره.

این دو مرحله رو در کد زیر پیاده سازی می‌کنیم:

/* --- وارد کردن گزینه ها در یک آرایه --- */
let items = document.querySelectorAll('ul li');

items.forEach(item => {

   /* --- بررسی تمامی گزینه ها برای حذف کلاس اکتیو --- */
   item.addEventListener('click', function(){
   items.forEach(item => {
      if(item.classList.contains('active')){
      item.classList.remove('active');
   }
   });
   /* --- دادن کلاس اکتیو به گزینه مورد کلیک --- */
   item.classList.add('active');
   });
});

اگه جایی از مقاله براتون مبهم بود (حتی این یه تیکه، برای هنرجو های کنجکاو تر!) حتما و حتما تو قسمت نظرات بپرسین تا کمکتون کنیم.

واکنش گرایی منو ها

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

اینجا کامل به دنبالش نمی‌ریم و به صورت کامل تو فصل واکنش گرایی بررسیش می‌کنیم.

واکنش گرایی به صورت خلاصه یعنی: صفحه وب سایت رو یجوری بسازیم که هم تو دسکتاپ جا بشه و هم تو گوشی!

ما می‌تونیم کد های CSS رو به فرمی بنویسیم که منوی ما تو دسکتاپ، به شکل افقی و تو گوشی، به شکل عمودی باشه، دقیقا مثل مثال زیر:

/* ------------------- کد صفحه دسکتاپ ------------- */
ul li{
   display: inline;
}
/* ------------------- کد صفحه موبایل ------------- */
@media (min-width: 320px) and (max-width: 576px){
   ul li{
      display: inline-block;
   }
}

کد فوق، وضعیت صفحه رو تو عرض بالا تر و پایین تر از ۴۸۰ پیکسل مشخص می‌کنه.

نتیجه رو به صورت زیر میبینیم:

مثال های کاربردی تر از منو ها

تو این بخش، یک سری مثال کاربردی تر و جذاب تر از منو های وب سایت های مختلف رو با هم بررسی می‌کنیم.

وب سایت شخصی علی اسمعیلی

شاید این اسم براتون آشنا باشه، بهتون حق می‌دم. علی اسمعیلی مدرس HTML تو همین وب سایته!

سایتش منوی ساده و قشنگی داره، همونطور که می‌بینیم، گزینه Home استایل متفاوتی از سایر گزینه ها داره، چون فعاله.

همچنین با کمتر شدن عرض صفحه، منوی مورد نظر به یک منوی عمودی تبدیل میشه.

آدرس وب سایت: realxoman.com

وب سایت آموزشی میزفا

میزفا، سایتی که الان داخلش داریم CSS یاد می‌گیریم، دارای یک منوی افقی تو صفحه اصلی خودشه. گزینه “خدمات ما” در حالت فعاله و همچنین، یک منوی واکنش گرا داریم که تو عرض های کوچیک تر، به منوی عمودی تبدیل می‌شه.

آدرس وب سایت: www.mizfa.com

وب سایت خبری نیویورک تایمز

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

آدرس وب سایت: www.nytimes.com

وب سایت فروشگاهی نوآ بایکز

همونطور که میبینیم، این وب سایت، هم تو حالت دسکتاپ و هم موبایل، از منوی عمودی استفاده کرده.

آدرس وب سایت: www.nuabikes.com

پایان ترم

سوال:

به کد HTML زیر توجه کنین:

نتیجه گیری

تو این مقاله آموزش جامع CSS ، دو نکته مهم برای جذاب تر کردن منو هامون رو بررسی کردیم.

یکی از اون ها، استفاده از hover برای تغییر استایل گزینه های زیر نشانگر منو بود، و دیگری استفاده از جاوااسکریپت برای تغییر استایل گزینه فعال منو.

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

خب، این فصل هم به پایان رسید. امیدوارم که بهره کافی رو برده باشید 🙂

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

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