آموزش طراحی قالب HTML و CSS طراحی منوی اصلی + آبشاری | پاسخ وردپرس |

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

ســــــلام ,

در خدمت شما هستم با جلسه سوم آموزش طراحی قالب HTML  و CSS  در وب سایت پاسخ وردپرس
توی این جلسه میخواهیم منوی اصلی را به طور کامل پیاده سازی کنیم پس با من همراه باشید .

آموزش طراحی قالب HTML و CSS طراحی منوی اصلی  به صورت آبشاری

خوب برای شروع اول از همه باید کد های HTML منو را پیاده سازی کنیم
پس کد های زیر را کپی کنید بعد از این لوگو و باکس جستجو
تمام شده قرار بدید .

نکته 

ما برای این پس رمینه منو را به صورت ۱۰۰ درصد قرار بدیم بعد از DIV  با کلاس container یک تک
nav با کلاس main-menu قرار دادیم اگه کد های را داخل مرور گر اجرا کنید مثل تصویر زیر خواهد بود

نتیجه کار

طراحی منوی اصلی + آبشاری

میبیند که اصلا استایل ندراه خوب برای این که یک استایل مناسب بهش بدیم اول برای ۱۰۰ درصد منو کد زیر را
در فایل style.css قرار بدید

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

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

بیشتر بخوانید :
آموزش HTML5 و CSS3 آموزش ویژگی clear در CSS | پاسخ وردپرس |

نتیجه کار

طراحی منوی اصلی + آبشاری

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

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

برای این کار کد های html زیر را کپی و جاگزین کدهای قبلی نمایید .

نکته : 

من از دوتا منوی تو در تو استفاده کردم که بهتر شما درک کنید اگه کد ها را داخل مرورگر اجرا کنید مثل تصویر زیر خواهد بود .

بیشتر بخوانید :
آموزش HTML5 و CSS3 معرفی سلکتور و تنظیم پس زمینه در css | پاسخ وردپرس |

نتیجه کار

طراحی منوی اصلی + آبشاری

میبیند که منوی ما یک بهم رختگی داره برای رفع این مشکل کد های css زیر کپی کنید داخل فایل style.css قرار دهید

خوب اگه الان کد ها را داخل مرور گر اجرا نمایید ما الان یک منو با قابلیت دو زیر منو داریم مثل تصویر زیر

بیشتر بخوانید :
آموزش HTML و CSS آشنایی با CSS Float جلسه 15 | پاسخ وردپرس |

نتیجه کار

طراحی منوی اصلی + آبشاری

اگه دقت کرده باشید این منوی وقتی که hover میشه یک عروکی بالا دیده میشه من کد زیر استفاده کردم برای اینکار

خوب دوستان عزیز این جلسه از آموزش طراحی قالب html  و css  به پایان رسید
اگه این آموزش دوست داشتید به دوستان خود به اشتراک بزارید
تا یکی دیگه از آموزش های وب سایت پاسخ وردپرس خدا نگهدار

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

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

لینک کپی شد!

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

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