• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6255 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آموزش طراحی متریال با Materialize (جلسه 19) - Navbar و منو

2 460 ۱۲ اردیبهشت ۹۵

در این جلسه با ادامه موضوع مربوط به طراحی متریال با Materialize در خدمتتون هستم.getting-started-materialize-css-framework

Materialize تعدادی کلاس رو بوجود آورده که با استفاده از اونا میتونین منو و Navigation های زیبایی رو بوجود بیارید و از اونا در سایتتون استفاده کنید. کلاسهایی که در این زمینه وجود دارند عبارتند از:

  • nav-wrapper : با نسبت دادن این کلاس به div پدر یا parent، مشخص میکنید که این المنت و اجزای اون میخان یک Navbar رو تشکیل بدن
  • brand-logo : یک المنت لینکی رو بصورت المنت اصلی در منو در نظر میگیره
  • nav-mobile : با نسبت دادن این کلاس به ul مورد نظر، اون رو بصورت یک Navigation Bar در میاریم

مثالها

با مثالهای زیر یکی یکی کلاسهای بالا و کاربردشون رو براتون توضیح میدم تا بیشتر باهاشون آشنا بشید.

منوی راست چین:

میبینید که برای div مورد نظر کلاس nav-wrapper رو در نظر گرفتیم. برای لینک مورد نظر هم کلاس brand-logo رو قرار دادیم تا لینک اصلی بشه. با دادن کلاس hide-on-med-and-down باعث میشیم که در دستگاههای با سایز متوسط و کوچک این ul مخفی بشه.

خروجی:a1

منوی چپ چین:

میبینید که برای div مورد نظر کلاس nav-wrapper رو در نظر گرفتیم. با استفاده از کلاسهای right و left هم ترازبندی و محل قرار گیری المنتها رو معین میکنیم.

خروجی:a2

منوی وسط چین:

خروجی:a3

منوی با لینک فعال:

میبینید که یکی از li ها کلاس active داره.

خروجی:a4

منوی همراه با DropDown:

بعد از اون باید با استفاده از Javascript لینکی که Dropdown هست رو فعال کنید:

خروجی:a5

زمانی که بر روی منوی مورد نظر کلیک میکنید، زیر منوهای اون به زیبایی باز میشن و میتونین آیتم مورد نظرتون رو انتخاب کنید.

منوی همراه با آیکون و لینک:

خروجی:a6

 

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

موفق و پیروز باشید

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    با سلام
    واقعا از سایت شما ممنونم بابت این مطالب که می زارین من تا به حال هیچ سایتی مثل سایت شما ندیدم خیلی زحمت می کشین با تشکر 😉

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram