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

ساخت منو های پیشرفته تر با CSS

آشنایی با ویژگی های پیشرفته منو ها
آشنایی با ویژگی های پیشرفته منو ها

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

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

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

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

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

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

اصلی ترین شبه کلاسی که ازش استفاده می کنیم. شبه کلاس 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;
}

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

منوی افقی و حالت hover

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

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

منوی عمودی در حالت hover

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

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

این کار با 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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

<ul>
    <li>صفحه اصلی</li>
    <li>دسته بندی محصولات</li>
    <li>سبد خرید</li>
    <li>درباره ما</li>
    <li>تماس با ما</li>
</ul>

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

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

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

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

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

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

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

10 نظر

10 پاسخ

  1. سلام من تو قسمت li یه color اضافه کردم چرا باز رنگ لیست اضافه نمیشه‌؟

    1. سلام
      شاید درست وارد نکردید یا یک رنگ دیگه اولویت داره. important هم میتونید وارد کنید.

  2. @font-face {
    font-family: ‘IRANSans’;
    src: url(‘fontpersian/IRANSans.ttf’) format(‘truetype’);
    }

    * {
    padding: 0;
    margin: 0;
    }

    *::selection {
    background-color: #fff;
    color: #000;
    }

    body {
    font-family: IRANSans, sans-serif;
    direction: rtl;
    background-color: #2a2c31;
    }

    ul {
    background-color: #f04e2b;
    padding-right: 0;
    border-radius: 0 0 25px 25px;
    }

    li {
    color: #2a2c31;
    display: inline-block;
    font-size: 2rem;
    padding: 20px;
    }

    li:hover {
    background-color: #2a2c31;
    color: #fff;
    transition: .4s;
    }

    @media (min-width: 320px) and (max-width: 576px){
    ul li{
    display: block;
    text-align: center;
    border-bottom: 1px solid #2a2c31;
    }
    }
    یه یک ساعتی واسه طراحی وقت برد امیدوارم خوب شده باشه

    1. سلام متين، خسته نباشي 🙂 خوب نشده. عالي شده، به خصوص اينكه ريسپانسيوشم كردي. مرسي ازت 🙂

  3. body{
    direction:rtl;
    font-family:’2 Titr’;
    }
    ul{
    font-size:20px;
    list-style-type:none;
    margin-right:-10px;
    position:fixed;
    }
    li{
    margin-bottom:10px;
    border:2px solid;
    border-color:rgba(46, 46, 46, 0.0);
    border-radius:40px;
    width:6cm;
    padding:10px;
    text-align:center;
    box-shadow:2px 2px 10px black;
    position:sticky;
    }
    li:hover{
    width:7cm;
    box-shadow:2px 2px 10px lightseagreen;
    color:lightseagreen;
    }
    li::selection{
    color:white;
    background-color:lightseagreen;
    }

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

  4. @font-face{
    font-family: “b titr”;
    src: url( ” windowsFonts/impact.ttf ” ) format( “woff” );
    }
    body{
    float: right;
    direction: rtl;
    font-family: “b titr”;
    }
    ul{
    list-style-type: none;
    padding-right:0px;
    background-color:#141414;
    }
    li{
    color:#FFFF00;
    display: inline-block;
    padding: 10px 20px;
    }
    li:hover {
    background-color:#FFFF00;
    color: #000000 ;
    }
    @media screen and (max-width: 400px) {
    ul li{
    float: none;
    display: block;
    }
    }

    1. مهدی جان پاسخ کوییزت آپلود نشده فقط اسم فایلش اومده.

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

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

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

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

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

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