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

- visibility ٢ mode_comment

در این جلسه با ادامه موضوع مربوط به طراحی متریال با 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

comment دیدگاه کاربران
رضا

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

محمد اسفندیاری

موفق باشید دوست عزیز

نیاز به لاگین

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