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

//

 منوی آبشاری در html و css

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

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

گام اول

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

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

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

گام دوم

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

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

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

گام سوم

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

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

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

گام چهارم

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

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

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

 

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

نظرات

هیچ دیدگاهی برای این محصول نوشته نشده است.

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