آموزش ساخت منوی آبشاری در html و css قسمت دوم

//

آموزش ساخت منوی آبشاری در html و css قسمت دوم در وب سایت  پاسخ وردپرس

در خدمت شما هستم با جلسه دوم ساخت منوی آبشاری در وب سایت پاسخ وردپرس در ادامه میخواهیم منوی آبشاری را تکمیل کنیم پس بامن همراه باشید .

ما توی جلسه قبلی زیر منو را هم ساختیم اما استایل های مورد نظر هنوز هم ندادیم .

آموزش ساخت منوی آبشاری

کد های html برای منوی آبشاری کد زیر را کپی نمایید و در فایل مورد نظر خود قرار دهید.

بعد از قرار دادن کد های بالا هنوز شکل مناسب نداره پس باید از کد های css کمک بگیریم .

ساخت منوی آبشاری در html و css قسمت دوم

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

کد زیر را کامل کپی نمایید و در فایل css خود قرار دهید .

بعد از قرار دادن کد های css حالا نتیجه کار باید مثل تصویر ریر خواهد شد.

آموزش ساخت منوی آبشاری

مرحلهٔ آخر، تنظیم موقعیت زیرمجموعه‌های زیرمجموعه‌ها است.
آن‌ها تمامی خصوصیات زیرمجموعه را به ارث می‌برند بنابراین نیاز است تا کاملاً به سمت راست منتقل شوند (;left:100%). حال منوی آبشاری آماده شده است و شما می‌توانید با سلیقهٔ خود، آن را شخصی‌سازی کنید:

اگه موس را روی زیر منو حرکت دهیم یک زیر منوی دیگه هم نمایان خواهد شد مثل تصویر زیر

آموزش ساخت منوی آبشاری

در دستورات بالا اومدیم و ساختار html خودمون رو به منو تبدیل کردیم.
دقت کنید که هر ul که به صورت تودرتو ایجاد میشه یک منو خواهد بود مثلا در ساختار بالا دوتا ul درون هم به صورت منویی است
که به سمت پایین باز میشه ولی سه تا ul درون هم مانند منویی هست که به سمت راست باز میشه.

نکته :

برای ایجاد منوهای تو در تو این نکته رو باید بدونید که در ul والد باید ابتدا محتوای درون رو display:none کنید
و بعدش که روی li های ul والد هاور (hover) شد بیاید و display محتوای درونی رو block کنید 😀 به همین راحتی! به همین خوشمزگی

خوب این جلسه از آموزش هم به پایان رسید امید وارم که مفید بوده باشه تا یکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدار

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

میانگین رتبه 5/5 تعداد رای : 1

نظرات

  1. کاربر پاسخ وردپرس

    عالی بود !!!! لایک

    • زمان الله ابراهیمی ( مدیریت )

      خوشحالم که برای شما مفید بوده موفق و سر بلند باشید

سبد خرید
در حال بروز رسانی