روز جهانی طراح وب مبارک 50 درصد تخفیف مدت محدود دوره طراحی قالب HTML5 CSS3 بوت استرپ 5 حرفه ای دریافت آموزش

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

مطالب پیشنهادی برای شما مهمان عزیز

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

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

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

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

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

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

بیشتر بخوانید :
آموزش جامع html و css به صورت فیلم آموزشی کاملا رایگان

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

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

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

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

بیشتر بخوانید :
آموزش html5و css3 خاصیت border در css جلسه 11

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

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

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

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

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

نکته :

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

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

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

بیشتر بخوانید :
آموزش HTML5 و CSS3 آموزش طراحی باکس تبلیغات 125*125 | پاسخ وردپرس |

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام یا پیج یوتیوب پاسخ وردپرس عضو شوید.

یک برنامه نویس آزاد که علاقه زیادی به اشتراک گذاری اطلاعات خود با دیگران داردم. همیشه به وردپرس فکر می کنم و عاشق وردپرس هستم. من یک web developer هستم و هدف من آسان کردن ورود سایر دوستان به این شغل جذاب هست. زبان برنامه نویسی محبوب من PHP هست.

لینک کپی شد!

نظر شما در این‌باره چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *