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

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

منوی های کشویی از پرکاربردترین موارد در آموزش html هستند.

یکی از امکاناتی که خیلی از وب سایت ها از اون استفاد می کنند و خیلی از طراح های وب اونها رو در کارها بکار میگیرند،
ایجاد منوی های کشوئی یا DropDown Menu می باشد. در این مطلب آموزشی به صورت گام به گام
خدمت دوستان نحوه ایجاد این منوها رو بوسیله HTML و CSS  در پاسخ وردپرس آموزش می دهیم.

گام اول

در گام اول کد HTML مربوط به منوی اصلی رو مینویسیم.
اصول طراحی منوها در HTML و CSS بوسیله تگ ul انجام شده و برای ایجاد منوی اصلی وب سایت کد HTML زیر رو در یک فایل با پسوند html (برای مثال index.html) ذخیره کنید:

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

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

گام دوم

برای ادامه باید با کمک CSS منوی اصلی را استایل دهی کنیم. برای این کار در بخش head داخل تگ style کدهای CSS زیر را اضافه می کنیم:

نتیجه کار به صورت تصویر خواهد شد:

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

گام سوم

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

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

بیشتر بخوانید :
آموزش html5 و css3 آموزش طراحی بخش محتوا سایت بخش تکمیلی | پاسخ وردپرس |

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

گام چهارم

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

بیشتر بخوانید :
آموزش HTML5 و CSS3 جلسه 2 برسی تگ های P و H1 تا H6

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

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

 

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

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

لینک کپی شد!

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

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